JQueryUI/SelectMenu - 底面に予想外のパディングがあります

Question

JQuery/JQueryUIを使用する次のHTMLコードがあります。

添付画像に表示されているbottom padding（赤い部分）を取り除く必要があります。ここで

あなたはJSFiddleに対応している：

https://jsfiddle.net/s8jmq2zh/

$(function() { 
 
    $("select").selectmenu(); 
 
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script> 
 

 
<table> 
 
    <tr> 
 
    <td style="background-color:#f00;"> 
 
     <select style="width:200px;"> 
 
     <option value="1">Option 1</option> 
 
     <option value="2">Option 2</option> 
 
     </select> 
 
    </td> 
 
    </tr> 
 
</table>

結果：

これを解決する方法はありますか？

Answer 1

jQueryUIスタイルシートは、display: inline-blockのように.ui-selectmenu-button要素をレンダリングし、スタイル付きの選択メニューの下に空白を追加するためです。この問題を解決するには、そのスタイルをオーバーライドし、display: block;を設定します。

$(function() { 
 
    $("select").selectmenu(); 
 
});

table .ui-selectmenu-button { display: block; }

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script> 
 

 
<table> 
 
    <tr> 
 
    <td style="background-color: #f00;"> 
 
     <select style="width: 200px;"> 
 
     <option value="1">Option 1</option> 
 
     <option value="2">Option 2</option> 
 
     </select> 
 
    </td> 
 
    </tr> 
 
</table>

Answer 2

あなたのfake select akaドロップダウンリストはinline-block要素なので、スペースは空白です。この擬似入力にdisplay: blockを設定すると、不要なスペースが削除されます。ui-selectmenu-button ui-widget ui-state-default ui-corner-allこれは!importantを追加し、既存のスタイルを上書きしない場合

.td > .ui-selectmenu-button { 
    display: block; 
} 

：

あなたが同じようなスタイルでそれを適用することができます。