CODEWITHSUNDEEP
jquerycss
ztsv
ztsv

Reputation: 880

change color of default option in select

I am trying customize select, but I cannot to change color of default option using css.

I tried to use .choose-flat__select option[default] and .choose-flat__select option:first-child, but it did not help.

Please see the example: https://jsfiddle.net/1v76mvo7/

Also, I tried to change it using jQuery:

$("#year-ready").find("option:first").attr("default", true).css('color', 'gray');

but unsuccessfully.

Is it possible to change color using CSS?

UPDATE:

I think that described a bit incorrect. I want that default option (in my case 'Year...') has gray color when it is selected: enter image description here, but if I select other options they should have black color: enter image description here

Upvotes: 0

Views: 2453

Answers (2)

Mahedi Sabuj
Mahedi Sabuj

Reputation: 2944

As far I understand, you want to change the color of the selected option. If it is then try the following css.

.choose-flat__select
{
  color: yourColorCode;
}

FIDDLE DEMO HERE

UPDATE

As per your updated question, you can do this by using Javascript.

$("#year-ready").change(function() {
   var val = $(this).val();
   if(val == yourDefaultValue)
   {
       $(this).addClass("default");
   }
   else
   {
      $(this).removeClass("default");
   }
});

And add the style in your css

.default
{
    color: gray;
}

UPDATED FIDDLE HERE

Upvotes: 2

Marius.H
Marius.H

Reputation: 65

you can use this code:

<select id="year-ready" name="" class="choose-flat__select">
  <option selected disabled>Year...</option>
  <option>2017</option>
  <option>2018</option>
  <option>2019</option>
  <option>2020</option>
  <option>2021</option>
</select>

if you don't wanna show your default, set it to hidden like this:

<option hidden selected disabled>Year...</option>

if you want to give many different colors, your can give your options some classes.

<option class="green" disabled selected>Year...</option>
<option class="red">2017</option>

Fiddle Example here

Upvotes: 1

Related Questions