jQuery-UI SelectMenu组件CSS自定义问题咨询

1. 能否为两个独立的SelectMenu设置不同背景色？ #

完全可以实现，核心是通过精准的CSS选择器定位或初始化时自定义类来区分两个组件：

方法一：给原始<select>加自定义类，通过相邻选择器定位 #

<select class="select-1">...</select>
<select class="select-2">...</select>

/* 第一个下拉按钮的背景色 */
.select-1 + .ui-selectmenu-button {
  background-color: #f8f8f8;
}
/* 第一个下拉面板的背景色 */
.select-1 + .ui-selectmenu-button + .ui-selectmenu-menu {
  background-color: #f8f8f8;
}

/* 第二个下拉按钮的背景色 */
.select-2 + .ui-selectmenu-button {
  background-color: #e6f3ff;
}
/* 第二个下拉面板的背景色 */
.select-2 + .ui-selectmenu-button + .ui-selectmenu-menu {
  background-color: #e6f3ff;
}

方法二：初始化时通过classes选项绑定自定义类 #

$(".select-1").selectmenu({
  classes: {
    "ui-selectmenu-button": "custom-btn-1",
    "ui-selectmenu-menu": "custom-menu-1"
  }
});

$(".select-2").selectmenu({
  classes: {
    "ui-selectmenu-button": "custom-btn-2",
    "ui-selectmenu-menu": "custom-menu-2"
  }
});

.custom-btn-1, .custom-menu-1 { background-color: #f8f8f8; }
.custom-btn-2, .custom-menu-2 { background-color: #e6f3ff; }

2. 能否隐藏滚动条？ #

可以隐藏，且不影响面板滚动功能，只需针对下拉面板的滚动容器做浏览器兼容处理：

/* 针对Firefox */
.ui-selectmenu-menu .ui-selectmenu-menu-wrapper {
  scrollbar-width: none;
  -ms-overflow-style: none; /* IE/Edge */
}

/* 针对Chrome/Safari/Opera */
.ui-selectmenu-menu .ui-selectmenu-menu-wrapper::-webkit-scrollbar {
  display: none;
}

如果需要直接禁止滚动，替换为overflow: hidden即可，但会截断超出面板的内容，按需选择。

3. 为什么设置边距的fieldSpace类被忽略？ #

主要原因是CSS优先级不足，jQuery UI的默认样式选择器比你的自定义类更具体，导致样式被覆盖。解决方式：

1. 提升选择器优先级：结合原始元素或父级元素定位，比如你把fieldSpace加在原始<select>上，就用：

select.fieldSpace + .ui-selectmenu-button {
  margin: 15px;
}

2. 检查类的绑定位置：确认fieldSpace是否加在了正确的元素上——jQuery UI会隐藏原始<select>，生成新的按钮容器，直接给原始select加类的话，需要通过相邻选择器定位生成的按钮。
3. 紧急情况用!important：不推荐，但可以快速验证是否是优先级问题：

.fieldSpace {
  margin: 15px !important;
}

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