0

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

<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/

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

我未能将灰色添加到带有箭头的小按钮。我也想让那个箭头变成白色。

单击时，我在下拉菜单周围看到默认的黄色边框。有没有办法让它变蓝

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

谢谢

4

3 回答 3

1

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

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

演示

至于“边框”颜色 - 你确定这不是“轮廓”吗？你试过改变outline-color: blue;吗？带大纲的演示。

这是 LI 在 Linux (Ubuntu) 上的 Chrome 中获取背景颜色的区别http://jsfiddle.net/rlemon/ZWwgW/7/
在此处输入图像描述

于 2012-08-20T18:33:12.340 回答
1

您无法更改箭头，但可以使其看起来像已使用图像更改。

这是一个简单的技巧，看看这个例子

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

于 2012-08-20T18:48:01.573 回答
0

遗憾的是，您将无法使用 CSS 更改该箭头，因为它是由您使用的浏览器呈现的。我唯一能想到的就是使用这个 JQuery 库（示例）

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

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

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

select{
outline-color: blue;
}
于 2012-08-20T18:35:32.060 回答