Question

HTML代码：

<select id="dict">
<option value="1">Google.com</option>
<option value="2">TheFreeDictionary.com</option>
<option value="3">Dictionary.Reference.com</option>
<option value="4">Merriam-Webster.com</option>
<option value="5">MacmillanDictionary.com</option>
<option value="6">OxfordDictionaries.com</option>
<option value="7">CollinsDictionary.com</option>
</select>

CSS代码：

#dict {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background-color: #EEE;
    border-style: solid;
    border-color: #646464;
    padding-left: 1.5px;
    padding-right: 1.5px;
    margin-left: 0px;
    border-width: thin;
    width: 263.5px; 
}

#dict:hover {
    border-color: #06F;
    color: #06F;
}

#dict:focus {
    outline: none;
    border-color: #093;
    color: #093;
}

Fiddle。这会创建一个带圆角的select下拉列表。

现在的问题是，当您点击下拉列表（并显示选项）然后再次单击它（让选项消失）然后您将鼠标移离下拉列表，颜色为文本和下拉列表的边框仍为绿色。

我该如何解决？

<小时/> 此外，我意识到单击下拉列表时，select变为绿色，但选项也变为绿色。单击下拉列表时，如何使选项不更改颜色？

提前致谢。

编辑：另外，如何使所选选项的文字显示为红色？

Answer 1

这应解决

  #dict {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background-color: #EEE;
    border-style: solid;
    border-color: #646464;
    padding-left: 1.5px;
    padding-right: 1.5px;
    margin-left: 0px;
    border-width: thin;
    width: 263.5px;
}

编辑

#dict option {
    color:#000000;
}

#dict:focus {
    border-color: #093;
    color: #093;
}
#dict:hover {
    border-color: #06F;
    color: #06F;
}

Answer 2

添加你的css

option {
        color:#000000;


}

编辑

我从来没有这样做，但我想它可以达到这样的目的

option[selected=selected]{
    color:red;    
}

css - 当鼠标移出时将恢复选择恢复为正常状态

2 个答案: