如何设置jQuery UI Selectmenu为150x40px的尺寸？

问题描述 #

我需要将jQuery UI Selectmenu设置为150x40px的尺寸，已通过以下代码成功设置宽度为150px：

$( "#brandstof" ).selectmenu({
  width: 150
});

但该组件没有height配置项，于是尝试用CSS设置高度为50px（实际需求为40px）：

.ui-selectmenu-button-closed,
.ui-selectmenu-button-open {
  border: 1px solid black !important;
  border-radius: 0 !important;
  color: #aaa !important;
  height:50px !important
}

结果实际高度约为99px，远超出设置值，且按钮内的文本和下拉图标未垂直居中。

解决方案 #

问题根源在于Selectmenu按钮内部存在嵌套元素，默认的padding、line-height等样式会撑开容器，且未做居中对齐。通过以下CSS调整即可解决：

.ui-selectmenu-button-closed,
.ui-selectmenu-button-open {
  border: 1px solid black !important;
  border-radius: 0 !important;
  color: #aaa !important;
  height: 40px !important; /* 匹配需求的高度 */
  padding: 0 1em !important; /* 保留左右内边距，清除上下内边距 */
  display: flex !important;
  align-items: center !important; /* 垂直居中内部元素 */
  justify-content: space-between !important; /* 文本与图标左右分布 */
}

/* 调整下拉图标的行高，避免额外撑开容器 */
.ui-selectmenu-button .ui-icon {
  line-height: 40px !important;
}

/* 清除文本容器的默认边距和内边距 */
.ui-selectmenu-text {
  margin: 0 !important;
  padding: 0 !important;
}

上述代码会让Selectmenu按钮准确保持150x40px的尺寸，同时内部文本和图标实现垂直居中对齐。

内容的提问来源于stack exchange，提问作者jiggy1965