程式小試身手

下拉式選單被其他元件遮住，選擇過ms-Dropdown-master、boostrap select 都無法解決此問題

還是回頭用jquerySelectmenu的自定義( 傳送門 )

但因為我要用自己的較大圖片，且不顯示文字

所以改了一些CSS

 $( function() {
    $.widget( "custom.iconselectmenu", $.ui.selectmenu, {
      _renderItem: function( ul, item ) {
          var li = $("<li>"),
          wrapper = $( "<div>", { text: item.label} );

        if ( item.disabled ) {
            li.addClass("ui-state-disabled");
        }
        $( "<span>", {
          style: item.element.attr( "data-style" ),
          "class": "ui-icon " + item.element.attr("data-class")       
        })
          .appendTo( wrapper );
        return li.append( wrapper ).appendTo( ul );
      }
    });
    $( "#filesB" )
      .iconselectmenu()
      .iconselectmenu( "menuWidget" )
        .addClass( "ui-menu-icons customicons" );
  
  } );
                                    </script>
                                    <style>                                  
                                        /* select with custom icons */
                                        .ui-selectmenu-menu .ui-menu.customicons {/*下拉選單的寬度*/
                                            width: 70px;

                                        }
                                        .ui-selectmenu-menu .ui-menu.customicons .ui-menu-item-wrapper {
                                            padding: 0.5em 0 0.5em 3em;

                                        }
                                       
                                       .ui-selectmenu-menu .ui-menu.customicons .ui-menu-item/*每一個item高度*/
                                       {
                                         height: 45px;                                         
                                        }
                                        .ui-selectmenu-menu .ui-menu.customicons .ui-menu-item .ui-icon {/*圖片能顯示寬高度*/
                                            height:45px;
                                            width: 45px;
                                            top: 0.1em;
                                        }
                                       
                                        .avatar .ui-icon {
                                            background-position: left top;
                                          
                                        }

                                       </style>

                                      <select name="filesB" id="filesB"style="width:45px">
                                             <option value="mypodcast"  data-style="background-image: url('../images/testpic.png');background-size: 40px 40px;"></option>
                                      </select>

成果: