Bordo inferiore per l’opzione di selezione della casella che non funziona su Chrome

Vorrei underline le opzioni disabilitate su una casella di select . Vedi il mio codice,

CODICE

 #myselect option { font-size: 13px; color: #1A1F24; } #myselect option:disabled { font-size: 11px; color: #ABB6C0; border-bottom: 1px solid #ABB6C0; } 
  One Two Three Four  

Questo codice funziona bene in Firefox. Non funziona in chrome. Come far funzionare questo anche in chrome?

JS Fiddle

Secondo questo articolo di ElectricToolbox, border non è una proprietà che puoi select in select / option / optgroup quando usi Chrome.

Ecco le proprietà che puoi modellare:

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

Nota : alcune di queste proprietà sopra funzionano solo per uno degli elementi, ad esempio solo il padding funzionerà in select

Se si desidera personalizzare i selects si consiglia di provare alcuni dei plugin di selezione qui, come:

  • Seleziona Bootstrap
  • Select2

Sembra che tu possa usare solo i bordi per gli elementi di option in Firefox come da questo .

È necessario creare un controllo elenco a discesa personalizzato per ottenere una soluzione universale. Consulta lo Styling elenco a discesa personalizzato per alcuni esempi.