javascript - JQueryUI/SelectMenu - 底部意外填充

Question

我有以下使用 JQuery/JQueryUI 的 HTML 代码。

我需要去除您在附图中看到的底部填充(红色区域)。

这里有相应的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 样式表将 .ui-selectmenu-button 元素呈现为 display: inline-block，它在样式化的选择菜单下添加了一些空白。要解决此问题，请覆盖该样式并设置 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>