Reputation: 7159
I would like to underline
the disabled options on a select
box. See my code,
CODE
#myselect option {
font-size: 13px;
color: #1A1F24;
}
#myselect option:disabled {
font-size: 11px;
color: #ABB6C0;
border-bottom: 1px solid #ABB6C0;
}
<select id="myselect">
<option value="1">One</option>
<option value="2" disabled>Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
This code works fine in firefox. Not working in chrome. How to make work this in chrome too ?
Upvotes: 4
Views: 10158
Reputation: 60603
According to this Article from ElectricToolbox , border
it isn't a property that you can style in select
/option
/optgroup
when using Chrome.
Here is the properties you can style:
font-style
font-weight
color
background-color
font-family
font-size
padding
Note : that some of these properties above only work for one the elements, for example, padding
only will work in select
If you want to customize selects
you may want to try some of the selects plugins out here, like :
Upvotes: 2
Reputation: 24098
It looks like you can only use borders for option
elements in Firefox as per this.
You would need to create a custom drop down list control to achieve a universal solution. Check out Custom Drop-Down List Styling for some examples.
Upvotes: 0