更改表單中下拉占位符的顏色

Question

我正在使用下拉元素制作表單。 我希望占位符文本是灰色的，就像在“文本輸入”表單中一樣，並且答案是黑色的。

我設法在下拉菜單中將答案設為另一種顏色，但是當您選擇它時，它會更改為占位符的顏色。

我正在使用的代碼;

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

Answer 1

將此腳本添加到您的頁面：

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

然后，對於要使用它的任何下拉列表，添加對“changeColor”函數的引用，如下所示：

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

script元素應該在文檔中的<head>和</head>

Answer 2

嘗試這個：

.remindmedropdown option:checked { color: gray; }

使用javascript進行動態更改：

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

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

更改表單中下拉占位符的顏色

問題描述

2 個解決方案

解決方案1
2 2013-05-02 23:24:26

解決方案2
0 已采納 2013-05-02 22:30:19

更改表單中下拉占位符的顏色

問題描述

2 個解決方案

解決方案1 2 2013-05-02 23:24:26

解決方案2 0 已采納 2013-05-02 22:30:19

解決方案1
2 2013-05-02 23:24:26

解決方案2
0 已采納 2013-05-02 22:30:19