CODEWITHSUNDEEP
htmlcssgoogle-chromeselect
Vinod VT
Vinod VT

Reputation: 7159

Border bottom for select box option not working on chrome

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 ?

JS Fiddle

Upvotes: 4

Views: 10158

Answers (2)

dippas
dippas

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

Gideon Pyzer
Gideon Pyzer

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

Related Questions