Wie kann ich ausgewählte Optionselemente in verschiedenen Browsern zuverlässig stylen?

Ausgewählte Optionselemente in verschiedenen Browsern gestalten

Die Gestaltung von Optionselementen innerhalb eines Auswahlmenüs kann eine Herausforderung darstellen, insbesondere in älteren Browsern wie IE9 und Chrome . Während einige Browser das Stylen dieser Elemente mit CSS unterstützen, können andere Einschränkungen aufweisen.

Optionselement-Styling-Probleme in IE9 und Chrome

Der bereitgestellte Code zeigt einen Versuch, ein zu stylen option-Element mit einem Klassenselektor:

option.red {
    background-color: #cc0000; 
    font-weight: bold; 
    font-size: 12px; 
    color: white;
}

In IE9 und Chrome kann dieser Stil jedoch nicht auf die Hintergrundfarbe des angewendet werden Option. Dies liegt daran, dass WebKit-Browser die Gestaltung von Optionselementen mit Ausnahme von Farbe und Hintergrundfarbe nicht vollständig unterstützen.

Browserübergreifende Lösung

Da nicht alle Browser Um eine konsistente Unterstützung für Styling-Auswahloptionen zu bieten, ist die Verwendung einer alternativen HTML-Struktur, die eine umfassende CSS-Anpassung ermöglicht, ein zuverlässigerer Ansatz. Dies kann erreicht werden, indem das Auswahlmenü durch eine Kombination aus ul (ungeordnete Liste) und li (Listenelemente) ersetzt wird:

HTML:

<ul>
    <li>Red</li>
    <li>White</li>
    <li>Blue</li>
    <li>Green</li>
</ul>

CSS:

ul {
    display: flex;
    flex-direction: column;
    padding: 0;
}

li {
    list-style-type: none;
    padding: 10px;
    border-bottom: 1px solid #ccc;
}

li:hover {
    background-color: #cc0000;
}

Diese Methode ermöglicht die vollständige CSS-Kontrolle über das Erscheinungsbild der Optionen, einschließlich Hintergrundfarbe und anderer Stile Optionen.

Das obige ist der detaillierte Inhalt vonWie kann ich ausgewählte Optionselemente in verschiedenen Browsern zuverlässig stylen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!