html - Border bottom for select box option not working on chrome -

i underline disabled options on select box. see 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 make work in chrome ?

js fiddle

according article electrictoolbox , border isn't property can style in select/option/optgroup when using chrome.

here properties can style:

• font-style
• font-weight
• color
• background-color
• font-family
• font-size
• padding

note : of these properties above work 1 elements, example, padding work in select

if want customize selects may want try of selects plugins out here, :

• bootstrap select
• select2