javascript - 更改特定 jQuery UI 对象(selectmenu)的样式而不是全部

Question

我有两个选择菜单。我想改变其中一个的外观和感觉。到目前为止，这是我尝试过的:添加两个选择，然后在样式标签中，我尝试更改类 ui-selectmenu-button 和 ui-selectmenu-text 仅select1 但没有成功。

// JS
<script>
$("#select1").selectmenu();
$("#select2").selectmenu();
</script>

 // HTML
<select id="select1">     
<option value="1"> 1 </option>
</select>
<select id="select2">   
<option value="2"> 2 </option>  
</select>

// CSS
<style>   
#select1 .ui-selectmenu-button{     
    background: rgb(12,27,37);   
}   

#select1 .ui-selectmenu-text{   
   color: white;   
} 
</style>

如果我简单地做下面的事情，它会工作但改变所有的 jquery ui selectmenus 并且我只希望它在这个例子中为 select1 工作。

<style>
.ui-selectmenu-button{  
    background: rgb(12,27,37);   
}  
</style> 

Answer 1

您可以使用 Adjacent sibling 连接器定位它。

#select1+.ui-selectmenu-button{  
   background: rgb(12,27,37);     
}  

由于 #select1 元素将被隐藏，但仍位于 jQuery UI 生成的代码之前，您可以在 CSS 中使用“+”号来定位它。

https://jsfiddle.net/jkrielaars/vadt8neh/