CODEWITHSUNDEEP
htmlcss
PKPrabu
PKPrabu

Reputation: 507

How to change color of the select list's first option

I couldn't make the selected drop down list's first option color. When we apply color for 'select', all options are getting change. How to change only the first option?

My Code:

#step3-drpdwn {
    width: 100%;
    border: 1px solid #ccc;
    margin-bottom: 25px;
    height: 34px;
    color: #ccc;
}
#step3-drpdwn>option:not(:first-child) {
    color: #000;
}
#step3-drpdwn>option:first-hand {
    color: #ccc;
}
<select class="btn btn-md" id="step3-drpdwn">
	<option disabled selected>
		Your Designation or Role in the Company
	</option>
	<option>
		Chairman
	</option>
	<option>
		President
	</option>
	<option>
		CEO
	</option>
	<option>
		Director
	</option>
	<option>
		Proprietor
	</option>
</select>

Upvotes: 2

Views: 3748

Answers (3)

Elmer Dantas
Elmer Dantas

Reputation: 4859

By what I've understood of your comment, I think that is what you want
HTML 

 <select class="btn btn-md" id="step3-drpdwn" onchange="setColor(this);">
        <option disabled selected>
            Your Designation or Role in the Company
        </option>
        <option>
            Chairman
        </option>
        <option>
            President
        </option>
        <option>
            CEO
        </option>
        <option>
            Director
        </option>
        <option>
            Proprietor
        </option>
    </select>

and JS 

function setColor(dropdown){
    dropdown.style.color = "black";
};

or if you are using JQuery 

$(document).ready(function(){
    $("#step3-drpdwn").on("change", function(){
        $(this).css("color", "#000");
    });
});

Here's Fiddle https://fiddle.jshell.net/qyLgorm8/1/ (uncomment the HTML/JS to see working with pure JS)

Hope it helps

Upvotes: 2

Akash Ryan
Akash Ryan

Reputation: 341

Add CSS below:

select#step3-drpdwn option:first-child{
  background: #ccc;
  color: red;
}

Upvotes: 2

Saugat Bhattarai
Saugat Bhattarai

Reputation: 2750

This might work for you. Try this:

$('#step3-drpdwn').change(function () {
    $('#step3-drpdwn').css("background", $("select option:selected").css("red"));
});

Upvotes: 0

Related Questions