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 connector定位它。

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

由于#select1元素将被隐藏，但仍然位于jQuery UI生成的代码之前，您可以使用＆＃39; +＆＃39;来定位它。登录CSS。

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

更改特定jQuery UI对象（selectmenu）的样式，而不是全部

1 个答案: