在窗体中更改下拉框占位符的颜色

问题描述：

我使用下拉元素创建窗体。我希望占位符文本是灰色的，就像在“文本输入”表单中一样，答案是黑色的。在窗体中更改下拉框占位符的颜色

我在下拉菜单中设法让答案变成另一种颜色，但是当您选择它时，它会更改为占位符的颜色。

我正在使用的代码;

<select class="remindmedropdown"> 
<option value="0" selected disabled>QUESTION</option> 
<option value="1">Answer 1</option> 
<option value="2">Answer 2</option> 
<option value="3">Answer 3</option> 
</select>

CSS：

.remindmedropdown { 
width: 240px; 
height: 40px; 
background-color: #FFF; 
padding: 10px; 
margin-right: 30px; 
outline-color:#A7D5E4; 
color:#990000; 
} 



.remindmedropdown option { color: gray; }

编辑：的jsfiddle http://jsfiddle.net/QkYC9/1/

您是否尝试过使用.remindmedropdown选项{color：gray！important; }？ - 编辑：在你的选择代码中有一个奇怪的 – nicolas 2013-05-02 22:31:03

那是什么''在那里做？字体元素已经过时和不好的做法..我甚至没有看到一个开始''任何地方 – jamauss 2013-05-02 22:32:37

字体标记删除！！重要的解决方案不幸运。 – JamesM 2013-05-02 22:34:02

答

试试这个：

.remindmedropdown option:checked { color: gray; }

对于使用JavaScript动态变化：

<select id="selection" class="remindmedropdown" onchange="colorSet()"> 
... 
</select> 

<script> 
function colorSet(){ 
    document.getElementById('selection').style.color="black"; 
} 
</script>

理论上这应该起作用。另见：http://stackoverflow.com/questions/8619406/css-selected-pseudo-class-similar-to-checked-but-for-for-select-elements – Mike 2013-05-02 22:32:39

我不知道为什么，但它不'工作？ – JamesM 2013-05-02 22:38:29

对于下拉式关闭检查迈克在评论中的链接。 – 2013-05-02 22:39:25

答

这个脚本添加到您的网页：

<script type="text/javascript"> 
    function changeColor(dropdownList){ 
     if (dropdownList.value > 0) { 
      dropdownList.style.color = 'black'; 
     } 
    }  
</script>

然后，你想用它在任何下拉列表中，增加一个参考“changeColor”功能是这样的：

<select class="remindmedropdown" onChange="changeColor(this)">

的脚本元素应该在您的文档中的<head>和</head>之间

这是我的答案。 – 2013-05-02 23:25:48

我的作品适用于任何select元素，而不仅仅是一个ID为'selection'的作品。我没有复制你的代码，对不起。您也没有检查代码中的

还有jamauss，谢谢你的帮助！ – JamesM 2013-05-02 23:30:09

在窗体中更改下拉框占位符的颜色

相关推荐