Rand unten für Auswahlbox Option funktioniert nicht auf Chrom

Question

Ich möchte underline die deaktivierten Optionen auf einer select Box. Sehen Sie meinen 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>

Dieser Code funktioniert in Firefox in Ordnung. Nicht in Chrom arbeiten. Wie macht man das auch in Chrom?

JS Fiddle

Answer 1

Nach dieser Article von ElectricToolbox, border es ist keine Eigenschaft, die Sie Stil in select/option/optgroup bei der Verwendung von Chrome. Hier

ist die Eigenschaften können Sie Stil:

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

Hinweis: dass einige dieser Eigenschaften, die oben nur Arbeit für einen der Elemente, beispielsweise padding nur in select arbeiten

Wenn Sie selects anpassen möchten Sie vielleicht hier draußen, wie einige der wählt Plugins, um zu versuchen:

• Bootstrap Select
• Select2

Answer 2

Es sieht aus wie Sie Grenzen für option Elemente verwenden können in Firefox gemäß this.

Sie müssten ein benutzerdefiniertes Dropdown-Listensteuerelement erstellen, um eine universelle Lösung zu erzielen. Check out Custom Drop-Down List Styling für einige Beispiele.