自定义下拉菜单

Question

这是我正在处理的下拉菜单。

<select id="frames" onchange="updateDisplay()" class="styled-select">    
    <OPTION value="ravi">ravi</OPTION>
    <OPTION value="steve">steve</OPTION>
    <OPTION value="robert">robert</OPTION>

</select>​

和css

select {
background-color:#232323;
    border-color:#232323;
    border-width:1px;
    color:white;
};​

http://jsfiddle.net/ravi007/ZWwgW/3/

我正在尝试添加灰色背景以下拉菜单。我部分成功了。

我无法用带箭头的小按钮添加灰色。我也想把那个箭头变成白色。

点击时，我看到一个默认的黄色边框。有没有办法让它变蓝？

当谷歌搜索时，我注意到按钮部分与浏览器有关。

由于

Answer 1

您还必须将背景添加到LI元素。这只是某些浏览器IIRC的问题。

select, select > option {
    background-color:#232323;
    border-color:#232323;
    border-width:1px;
    color:white;    
}  

Demo

至于'边框'颜色 - 你确定这不是'大纲'吗？你试过改变outline-color: blue;吗？ Demo with outline.

这与LI在Linux上获取Chrome背景颜色（Ubuntu）http://jsfiddle.net/rlemon/ZWwgW/7/的不同之处在于

Answer 2

您无法更改箭头，但可以使用图像更改箭头。

这是一个简单的技巧，看看这个Example

不完全是你想要的，但很有帮助。

Answer 3

不幸的是， 您将无法使用CSS更改该箭头，因为它是由您正在使用的浏览器呈现的。 我唯一能想到的就是使用this JQuery Library（example）

对于边框，我认为您可以像这样访问它（此边框仅由某些浏览器呈现，如safari）：

select::-moz-focus-inner {
  border-color: blue;
}

如果你在谈论大纲，你可以简单地做：

select{
outline-color: blue;
}