0

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/

JamesM
  • 101
  • 2
  • 3
  • 11

2 Answers2

2

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

jamauss
  • 1,001
  • 1
  • 15
  • 35
  • mine works for any select element, not just one with an ID of 'selection'. I didn't copy your code, sorry. You're also not checking the value of the – jamauss May 02 '13 at 23:27
  • yeah which is why I posted this other non-jQuery answer. Your answer, while it does work, also ties the code to a specific element ID, which isn't really necessary and would make the function useless for more than just a single – jamauss May 02 '13 at 23:33
  • 3 edits after my 3 answers. Just..lol If you want to correct an answer just leave a comment and ill edit it. This is not a reputation race. – Francisco Afonso May 02 '13 at 23:34
  • I don't know what I need to say to convince you I didn't copy your answer. I wrote it myself, tested it in Firebug, then posted my code. I've been writing JS for 10+ years, I don't need to copy code someone posts on here. But, whatever you want to believe... – jamauss May 02 '13 at 23:36
0

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>
Francisco Afonso
  • 247
  • 1
  • 15
  • This should work, in theory. See also: http://stackoverflow.com/questions/8619406/css-selected-pseudo-class-similar-to-checked-but-for-for-select-elements – Mike May 02 '13 at 22:32
  • For dropdown closed check Mike's link in comments. – Francisco Afonso May 02 '13 at 22:39
  • I tried using that, but nothing happened (and to be honest, I don't really know how it works). I've put it in a jsfiddle, and as you can see, when selected it stays gray. http://jsfiddle.net/QkYC9/1/ – JamesM May 02 '13 at 22:49
  • when you select an option element the text goes to the select element so when selected you need to change the select or .remindmedropdown color. If you want to change the color on event you need to use javascript. – Francisco Afonso May 02 '13 at 23:01
  • @JamesM check my update with simple javascript code. Added id attribute to select element. Added onchange event to select element. Added javascript funtion. That – Francisco Afonso May 02 '13 at 23:22
  • 1
    just FYI - If you are going to have more than one of these types of dropdown elements on your page - this code won't work - see my answer below for a solution that will work with more than one. – jamauss May 02 '13 at 23:31
  • He's new to javascript, just let him understand that when he gets there. – Francisco Afonso May 02 '13 at 23:33