How to change colour of drop down menu. Like if i have a drop down menu with 5 options, when ever i click an option i want that option to change colour so that i can keep track which options i have already selected. ( 5 here is hypothetical, i have bigger list with IP`s and ports as field so cannot remember all the fields i have checked).

Lets just assume my drop down is

<select>
    <option val="">Please choose</option>
    <option val="1">Option 1</option>
    <option val="2">Option 2</option>
    <option val="3">Option 3</option>
    <option val="4">Option 4</option>
    <option val="5">Option 5</option>
</select>

How to change colour of drop down menu. Like if i have a drop down menu with 5 options, when ever i click an option i want that option to change colour so that i can keep track which options i have already selected. ( 5 here is hypothetical, i have bigger list with IP`s and ports as field so cannot remember all the fields i have checked).

Lets just assume my drop down is

<select>
    <option val="">Please choose</option>
    <option val="1">Option 1</option>
    <option val="2">Option 2</option>
    <option val="3">Option 3</option>
    <option val="4">Option 4</option>
    <option val="5">Option 5</option>
</select>

• javascript
• css
• html

Share Improve this question Follow asked Oct 10, 2014 at 5:54 mughees ilyasmughees ilyas 52611 gold badge1010 silver badges2828 bronze badges 2

• Why dont you use check box or sloshbucket? I dont think color coding is a good way of design for usability. Is it the red wire or the green? – Bhabani Sankar Mishra Commented Oct 10, 2014 at 7:05
• i have atleast 50 items so sloshbucket will take alot of space pare to drop down and check box will make it cumbersome as to use drop down and then check simple highlighting the options in use seems like a good idea – mughees ilyas Commented Oct 10, 2014 at 8:42

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

var select = document.getElementById('select');
select.onchange = function() {
  select.options[select.selectedIndex].style.backgroundColor = 'red';
}

var clean = document.getElementById('clean');
clean.onclick = function() {
    for(var i = 0; i < select.options.length; i++) {
      select.options[i].style.backgroundColor = '';  
    }
}

<select id="select">
    <option val="">Please choose</option>
    <option val="1">Option 1</option>
    <option val="2">Option 2</option>
    <option val="3">Option 3</option>
    <option val="4">Option 4</option>
    <option val="5">Option 5</option>
</select>

<button type="button" id="clean">Clean</div>

Try this

 $('yourdropdownid option:selected').css('background-color', 'red');

Here you go:

DEMO

$('select option').click(function(){
    $(this).css('background','yellow');   
});