CODEWITHSUNDEEP
htmlcss
Paige Rose Figueira
Paige Rose Figueira

Reputation: 121

Change color of selected option in html select input

I am trying to change the text color of a SELECTED option in a Select menu and I cannot seem to get it to work. Below is my code. Any ideas? I only want to change the color once an option with a value has been selected... i.e. anything but the first option.

http://jsfiddle.net/wtedm8q9/

html:

<div class="row1-3home">
  <select  name="phone1" id="phone1">
        <option value="">-- Select Phone Type --</option>
        <option value="Mobile">Mobile</option>
        <option value="Office">Office</option>
        <option value="Home">Home</option>
    </select>

   <select  name="phone2" id="phone2">
        <option value="">-- Select Phone Type --</option>
        <option value="Mobile">Mobile</option>
        <option value="Office">Office</option>
        <option value="Home">Home</option>
  </select>  


</div>

CSS: 

.row1-3 select, .row1-3home select {
background:#FFF;
font-size:12px;
font-family:'Open Sans', sans-serif;
width:94%;
margin-left:3%;
margin-right:3%;
height:40px;
line-height:40px;
border:none;
padding-left:10px;
border-radius:none;
margin-bottom:5px;
-moz-appearance: none;
}
.row1-3 select option, .row1-3home select option {
color:#01afd2;
}
.row1-3 select option:not(:checked), .row1-3home select option:not(:checked) {
color:#9fa7b4;
}

Upvotes: 2

Views: 21958

Answers (3)

Fahad Hasan
Fahad Hasan

Reputation: 10506

Please check this, you will need to use jQuery in order to exactly achieve what you're trying to do: jsFiddle.

jQuery:

jQuery('#phone1').change(function () {
    if (jQuery(this).children('option:first-child').is(':selected')) {
        jQuery("#phone1").css("color", "black");
        jQuery("#phone1 option:checked").css("color", "black");
        jQuery("#phone1 option:not(:checked)").css("color", "black");
    } else {
        jQuery("#phone1").css("color", "#01afd2");
        jQuery("#phone1 option:checked").css("color", "#01afd2");
        jQuery("#phone1 option:not(:checked)").css("color", "black");
    }
});

jQuery('#phone2').change(function () {
    if (jQuery(this).children('option:first-child').is(':selected')) {
        jQuery("#phone2").css("color", "black");
        jQuery("#phone2 option:checked").css("color", "black");
        jQuery("#phone2 option:not(:checked)").css("color", "black");
    } else {
        jQuery("#phone2").css("color", "#01afd2");
        jQuery("#phone2 option:checked").css("color", "#01afd2");
        jQuery("#phone2 option:not(:checked)").css("color", "black");
    }
});

With this jQuery, if the first option is selected, i.e. -- Select Phone Type --, its colour remains black but if you select any of the other options, their colour changes to #01afd2.

Upvotes: 0

LcSalazar
LcSalazar

Reputation: 16831

Remove the attribute value="" from the first options:

Updated Fiddle

<select  name="phone1" id="phone1">
      <option>-- Select Phone Type --</option>
      <option value="Mobile">Mobile</option>

And then add the attribute selector to the css rule:

.row1-3 select option[value]:checked, .row1-3home select option[value]:checked {
    color:#01afd2;
}

PS: I took the liberty to change your selector. Instead of :not(:checked) , use a general style, and change the color only on checked ones...

Upvotes: 0

Brian
Brian

Reputation: 4344

With a bit of jQuery, you can have it change color when someone changes the menu item.

Updated fiddle

jQuery

$("select").change(function() {
    $(this).css('color','red')
})

Upvotes: 6

Related Questions