CODEWITHSUNDEEP
htmlcss
John Smith
John Smith

Reputation: 407

How can color the first item in a select?

I have this sample:

link

CODE HTML:

<select name="card_type" id="card_type" class="select-full">
    <option value="">Select</option>
    <option value="visa">Visa</option>
    <option value="mastercard">Mastercard</option>
    <option value="discovery">Discovery</option>
    <option value="maestro">Maestro</option> 
</select>

CODE CSS:

select
{
   color: #ccc;
}
option
{
   color: #000;
}
option:first-child
{
   color: red;
}

I have a wish to spot and select only the first item in the list. The first element to be red and the other to be gray for example.

Is there any possibility to do this? I tried the above code but does not work. Can you please tell me what is wrong?

Thanks in advance!

Upvotes: 3

Views: 106

Answers (4)

Ajay Malhotra
Ajay Malhotra

Reputation: 838

I have made changes in snippet. Please check it.

is this the way you want? 

$(document).ready(function(){
  if($(this).val() == 0){
      $('select').css("color","red");
    }
    else{
      
      $('select').css("color","#000")
    }
  $('select').change(function(){
    
    if($(this).val() == 0){
      $('select').css("color","red");
    }
    else{
      
      $('select').css("color","#000")
    }
  })
})
select
{
   color: #ccc;
}
option
{
   color: #000;
}
option:first-child
{
   color: red;
  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="card_type" id="card_type" class="select-full">
    <option value="0">Select</option>
									    <option value="visa">Visa</option>
									    <option value="mastercard">Mastercard</option>
									    <option value="discovery">Discovery</option>
									    <option value="maestro">Maestro</option>
								</select>

Upvotes: 2

Gaurav Aggarwal
Gaurav Aggarwal

Reputation: 10187

Well assuming something.

I think you want your <option value="visa">Visa</option> to color red but note that this is second option so use this css

select.select-full option:nth-child(2){
  color:red;
}

fiddle link :https://jsfiddle.net/yudi/L439rrsd/

Upvotes: 1

SuperNova
SuperNova

Reputation: 27466

Use nth-of-type(1)

option:nth-of-type(1)
{
   color: red;
}

Upvotes: 1

Gulmuhammad Akbari
Gulmuhammad Akbari

Reputation: 2036

Try this:

select:first-child{color: red;}

Upvotes: 1

Related Questions