The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> How to style an option in a dropdown, How to style an option in a dropdown
Nalini
post Oct 19 2016, 10:42 AM
Post #1





Group: Members
Posts: 3
Joined: 19-October 16
Member No.: 24,893



Hello,

I want to style a particular option which has a value of -1 in a dropdown. How should I target it? Please advice.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 19 2016, 11:46 AM
Post #2


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



If the OPTION element's VALUE attribute is specified you might use an attribute selector, like this:

CODE
option[value="-1"] {color: red;}

<select>
<option value="1">foo</option>
<option value="0">bar</option>
<option value="-1">baz</option>
</select>

If the VALUE attribute is not specified (a value can be specified with the OPTION's content as well) the above won't work, though.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Nalini
post Oct 19 2016, 12:20 PM
Post #3





Group: Members
Posts: 3
Joined: 19-October 16
Member No.: 24,893



QUOTE(Christian J @ Oct 19 2016, 12:46 PM) *

If the OPTION element's VALUE attribute is specified you might use an attribute selector, like this:

CODE
option[value="-1"] {color: red;}

<select>
<option value="1">foo</option>
<option value="0">bar</option>
<option value="-1">baz</option>
</select>

If the VALUE attribute is not specified (a value can be specified with the OPTION's content as well) the above won't work, though.

Thank you so much! Worked like a charm.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 07:59 AM