我想做的是从 a 出来的下拉列表,select
在这种情况下是一组options
,具有不同的背景颜色,当它通过它时,它会修改其色调。
CSS 代码:
select option {
color:Red;
}
我已经应用了上述内容,但我加载了页面并且它没有标记任何更改,字母仍然是黑色的。该设计可以应用于其他人,clases
除非尝试执行选项。
选择通用代码(css):
select {
/* styling */
background-color: white;
border: thin solid blue;
border-radius: 4px;
display: inline-block;
font: inherit;
line-height: 1.5em;
padding: 0.5em 3.5em 0.5em 1em;
/* reset */
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
}
当然,问题在于(不是)中文本的颜色
select
option
仍然是黑色。解决方案:
为.
color
_select
例子:
如果我没记错的话,这不是现在可以做的事情。
在标准中,没有任何关于样式的规定
option
,而是浏览器根据需要来表示它们;因此,即使您找到了一种方法,它也可能不适用于所有浏览器。有些尊重 and 属性
color
,background-color
但情况并非总是如此:Chrome 和 IE 会这样做,Firefox 不会(尽管这可能是Marcos Gallardo 在评论中指出的错误),并且只有 IE/Edge 尊重:hover
. 因此,以下代码在每个浏览器中看起来会有所不同:而且我所知道的悬停颜色条
option
无法设置样式(在某些情况下它甚至不存在,例如在下拉菜单是“旋转轮”的 iOS 上)。要设置 a 的样式
select
,您也许可以使用ul
/li
并模拟下拉菜单。一些像Bootstrap这样的框架有这样创建的下拉菜单,你可以很容易地改变它们的样式。