Webmaster-Crashkurs

farbige DropDown-Formularelemente

DropDown-Menü mit Hintergrundfarbe und farbiger Schrift

Über CSS kann dem Formularelement DropDown-Menü Hintergrundfarben für einzelne Punkte zugewießen werden:

Dazu wird im HTML-Bereich den einzelnen Einträgen eine Klasse zugeteilt - in unserem Beispiel mit dem Namen: dropdownfarbig

<select name="auswahl" size="11" >
    <option value="1" class="dropdownfarbig" >Haupt-Menü 1</option>
    <option value="2">Menü 1.1</option>
    <option value="3">Menü 1.2</option>
    <option value="4">Menü 1.3</option>
    <option value="5" class="dropdownfarbig" >Haupt-Menü 2</option>
    <option value="6">Menü 2.1</option>
    <option value="7">Menü 2.2</option>
    <option value="8">Menü 2.3</option>
    <option value="9">Menü 2.4</option>
    <option value="10" class="dropdownfarbig" >Haupt-Menü 3</option>
    <option value="11">Menü 3.1</option>
    <option value="12">Menü 3.2</option>
</select>
Und im CSS wird die Hintergrundfarbe und die Schriftfarbe definiert:
.dropdownfarbig {
    color: red;
    background-color: yellow;
}

Diese Funktion geht nicht für alle Browser-Versionen, aber dort wo es nicht funktioniert, behindert es auch keine Funktion!

HTML5-Video-Kurs:
hier klicken für
mehr Informationen
© 2008-2020   •   www.webmaster-crashkurs.de - HTML5 Tutorial mit VideosImpressumDatenschutzerklärung
weitere eigene Projekte: