CODEWITHSUNDEEP
htmlcssforms
JamesM
JamesM

Reputation: 101

Changing the color of dropdown placeholder in form

I'm making form with a drop down element. I want the placeholder text to be gray, just like in the 'text input' forms, and the answer to be black.

I managed to make the answers another color in the dropdown menu, but when you select it, it changes to the color of the placeholder.

The code I'm using;

<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; }

Edit: jsfiddle http://jsfiddle.net/QkYC9/1/

Upvotes: 0

Views: 12509

Answers (2)

jamauss
jamauss

Reputation: 1043

add this script to your page:

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

Then, for any dropdown that you want to use it on, add a reference to the "changeColor" function like this:

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

the script element should go between <head> and </head> in your document

Upvotes: 2

Francisco Afonso
Francisco Afonso

Reputation: 247

Try this:

.remindmedropdown option:checked { color: gray; }

For dynamic change with javascript:

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

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

Upvotes: 0

Related Questions