Hier's mein HTML:
<select id="ddlProducts" name="ddProducts">
<option>Product1 : Electronics </option>
<option>Product2 : Sports </option>
</select>
Ich möchte den Namen des Produkts (z.B. 'Produkt1', 'Produkt2' , etc) fett und die Kategorien (z.B. Elektronik, Sport, etc) kursiv darstellen, nur mit CSS. Ich habe eine alte Frage gefunden, die besagt, dass dies mit HTML und CSS nicht möglich ist, aber hoffentlich gibt es jetzt eine Lösung.
Es gibt nur wenige Stilattribute, die auf ein Element <option>
angewendet werden können.
Das liegt daran, dass diese Art von Element ein Beispiel für ein "ersetztes Element" ist. Sie sind betriebssystemabhängig und sind nicht Teil des HTML/Browsers. Es kann nicht über CSS
gestaltet werden.
Es gibt Ersatz-Plug-ins/Bibliotheken, die wie ein "select"" aussehen, aber eigentlich aus regulären HTML-Elementen bestehen, die man stylen kann.
Nein, das ist nicht möglich, da das Styling für diese Elemente vom Betriebssystem des Benutzers übernommen wird. MSDN beantwortet Ihre Frage hier:
Mit Ausnahme von background-color
und color
werden Stil-Einstellungen, die über das style-Objekt für das option-Element angewendet werden, ignoriert.
Wie oben erwähnt, nicht wirklich möglich; jedoch, wenn Sie nur den Ausgangszustand für so etwas wie ein 'Select Product...' Option, bevor ein Benutzer mit dem Feld interagiert, könnten Sie etwas wie unten tun Stil -
Im folgenden Beispiel wird die erste Option (technisch gesehen alle) rot gestaltet und sobald ein Benutzer interagiert, wird diese Option (die den Wert="defaultValue" hat) entfernt und die auf die Auswahl angewendete Klasse entfernt. Sie können neben der Farbe auch andere Optionen anwenden, aber diese wirken sich nur auf das geänderte Feld aus, nicht auf die Listenansicht.
CSS
.default-value{
color: red;
}
jQuery
$("select").addClass('default-value');
$("select").bind("focus", function () {
$(this).children('option[value="defaultValue"]').remove();
$(this).removeClass('default-value');
});