Html 自定义下拉菜单

这是我正在使用的下拉菜单

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

</select>​

我试图添加一个灰色背景下拉菜单。我取得了部分成功

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

当我单击时，我看到一个默认的黄色边框环绕下拉列表。有没有办法让它变蓝

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

---

谢谢

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

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

至于“边框”颜色-你确定这不是“轮廓”吗？？您是否尝试过更改

轮廓颜色：蓝色

以下是与LI在Linux（Ubuntu）上使用Chrome获得背景色的区别

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

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

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

select{
outline-color: blue;
}

您不能更改箭头，但可以使用图像使其看起来像已更改的箭头

这里有一个简单的技巧，看看这个

这不完全是你想要的，但很有帮助。
IIRC他所说的“黄色”不是边框，而是一个
轮廓。谢谢关于将灰色添加到带有箭头的小框中，并将箭头设置为白色，即使在将背景添加到列表元素后，我也看不到您的演示中有任何差异。在我的浏览器上会有所不同。我将添加一个屏幕。就像我说的，这是特定于浏览器的。谢谢。hmmm不幸的是，它在windows chrome上不起作用（.那小箭头呢。有没有把它变成白色的选项。我不知道。但正如人们一直建议的那样，确保100%跨浏览器兼容性和一致性的最佳解决方案是使用自定义下拉（选择）菜单屏蔽控件。
select::-moz-focus-inner {
  border-color: blue;
}

select{
outline-color: blue;
}