相关疑难解决方法(0)

是否可以在悬停时更改选择列表选项的默认背景颜色？

HTML:

<select id="select">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

我试过了 option:hover { background-color: red; },但没用.有人知道怎么做这个吗？

当我关注下拉时,我想从IE更改蓝色背景颜色,但我似乎无法找到任何CSS来执行此操作.

<select id=focusSelect><option>Option</option></select>

JS:

document.getElementById("focusSelect").focus();

CSS:

select:focus{
    background-color: red;
}

http://jsfiddle.net/TafDD/3/

具体来说,这是在下拉菜单未打开时.样式选项不是问题.

关于这是否可行,我也找不到任何明确的答案.

设置option背景颜色也不会清除蓝色.

option {
    background-color: green;
}

http://jsfiddle.net/srycroft/yE2Zg/

我正在使用bootstrap-duallistbox

当前，当用户从任一框中单击一个选项时，该选项的背景变为蓝色一秒钟，然后该选项移动到另一个选择框。

我想将颜色从蓝色更改为其他颜色。

这到底是什么状态？CSS应用option:active，option:hover，option:focus不干活，就选择此状态，并改变颜色。

我以为这可能有用，但也失败了。

select:-internal-list-box option:checked {
    color: #333 !important;
    background-color: #FFC894 !important;
}

也没有：

select:-internal-list-box option:selected  {
    color: #333 !important;
    background-color: #FFC894 !important;
}

select:-internal-list-box:focus  option:checked  {
    color: #333 !important;
    background-color: #FFC894 !important;
}

select:-internal-list-box:focus  option:selected  {
    color: #333 !important;
    background-color: #FFC894 !important;
}

select:-internal-list-box:focus option::selection  {
    color: #333 !important;
    background-color: #FFC894 !important;
}

.bootstrap-duallistbox-container:focus select option::selection {
    background: #ffb7b7 !important;
}

单击选项时如何更改显示的背景颜色？

这是一个显示问题的jsFiddle

我正在尝试更改“选择”菜单中 SELECTED 选项的文本颜色，但似乎无法使其正常工作。下面是我的代码。有任何想法吗？一旦选择了具有值的选项，我只想更改颜色......即除了第一个选项之外的任何内容。

http://jsfiddle.net/wtedm8q9/

html：

<div class="row1-3home">
  <select  name="phone1" id="phone1">
        <option value="">-- Select Phone Type --</option>
        <option value="Mobile">Mobile</option>
        <option value="Office">Office</option>
        <option value="Home">Home</option>
    </select>

   <select  name="phone2" id="phone2">
        <option value="">-- Select Phone Type --</option>
        <option value="Mobile">Mobile</option>
        <option value="Office">Office</option>
        <option value="Home">Home</option>
  </select>  


</div>  

CSS：

.row1-3 select, .row1-3home select {
background:#FFF;
font-size:12px;
font-family:'Open Sans', sans-serif;
width:94%;
margin-left:3%;
margin-right:3%;
height:40px;
line-height:40px;
border:none;
padding-left:10px;
border-radius:none;
margin-bottom:5px;
-moz-appearance: none;
}
.row1-3 select option, .row1-3home select option {
color:#01afd2;
}
.row1-3 select option:not(:checked), .row1-3home select option:not(:checked) {
color:#9fa7b4; …