Optionen werden dem Benutzer angegeben, wenn mehrere Werte eines einzelnen Elements vorhanden sind, aus denen Benutzer eine Option gemäß ihren Einstellungen auswählen können. Es existiert in verschiedenen Formen, wie z. B. ein Kontrollkästchen, ein Dropdown-Menü und ein Optionsfeld. Insbesondere enthält das Dropdown-Menü vordefinierte Optionenlisten, mit denen der Benutzer eine auswählen kann.

In diesem Handbuch wird die Prozedur zum Ändern der Farbe der ausgewählten Option erläutert. Zuerst erstellen wir ein Dropdown-Menü und stylen es mit CSS und ändern dann die ausgewählte Optionsfarbe.

Lass uns anfangen!

So erstellen Sie das Dropdown-Menü mit HTML & CSS?

In HTML können Sie ein Dropdown-Menü erstellen, indem Sie „verwenden“","" Und "" Stichworte. Um klarer zu verstehen, wechseln wir zur Syntax des Dropdown-Menüs.

Syntax

Hier ist die Syntax des Dropdown-Menüs:

Text

Option 1
Option 2
…
Optionn

Erklären wir die in der obigen Syntax verwendeten HTML -Tags:

• : Es wird verwendet, um die verkürzte Option in Textform anzugeben.
• : Mit diesem Element kann der Benutzer ein Element aus einer Liste auswählen.
• : Es wird verwendet, um Optionen für das Dropdown-Menü bereitzustellen.

Hier präsentieren wir ein praktisches Beispiel, um die obige Syntax zu erklären.

Schritt 1: Erstellen Sie ein Dropdown-Menü

Erstens erstellen wir A und fügen eine Überschrift mit der hinzu

Schild. Um ein Dropdown-Menü hinzuzufügen, verwenden wir ein Etikett-Tag und fügen Sie hinzuWähle ein Land”Als Etikett. Danach werden wir das Tag verwenden, um Optionen für den Benutzer köstlich zu gestalten und die Optionswerte mit der “zuzuweisen" Schild.

Html

Linux

Wähle ein Land:


Deutschland
Iran
Truthahn
Indien
China

Notiz: Wir haben benutzt "versteckt ausgewählt" konkretisieren "-wähle eine Option-”Als Standardoption. Wenn der Benutzer jedoch einen von ihnen auswählt, wird er versteckt sein.

Im Folgenden werden wir zum CSS gehen und es stylen.

Schritt 2: Style Dropdown-Menü mit CSS

Wir werden verwenden "div”Zu Zugang zum erstellten Container und festlegen die Hintergrundfarbe der DIV als"RGB (191, 207, 235)”. Wir werden auch die Höhe des DIV, die Schriftgröße des Textes und die Farbe des Textes als “festlegen150px","x-large", Und "RGB (2, 0, 0)", bzw. Als nächstes werden wir die Grenze der Div als “festlegen5px","Grat", Und "RGB (108, 75, 209)”.

CSS

div
Hintergrundfarbe: RGB (191, 207, 235);
Höhe: 150px;
Schriftgröße: x-large;
Farbe: RGB (2, 0, 0);
Grenze: 5px Ridge RGB (108, 75, 209);

Jetzt werden wir das Dropdown-Menü stylen und die Hintergrundfarbe des Menüs als “festlegenRGB (194, 222, 209)"Und der Rand der Speisekarte als"3px","solide", Und "RGB (84, 73, 116)”. Danach setzen wir die Breite, Höhe und Schriftgröße des Menüs als “300px","30px" Und "groß", bzw:

wählen
Hintergrund: RGB (194, 222, 209);
Grenze: 3px fester RGB (84, 73, 116);
Breite: 300px;
Höhe: 30px;
Schriftgröße: groß;

Wie Sie aus der Ausgabe sehen können, wird das Dropdown-Menü erstellt und mithilfe der HTML und CSS erfolgreich gestylt:

In der obigen Ausgabe ist ersichtlich, dass das Dropdown-Menü erstellt wird. Er ermöglicht Ihnen die Auswahl einer beliebigen Option entsprechend Ihren Einstellungen. Wir wechseln zum nächsten Abschnitt, wo wir die ausgewählte Optionsfarbe mit dem CSS ändern werden.

So ändern Sie die Farbe der ausgewählten Option mit CSS?

So ändern Sie die ausgewählte Optionsfarbe des Menüs, die “: überprüft”Selektor von CSS wird verwendet. : Checked ist ein Element der Pseudoklasse, das nur mit Eingangstypelementen verknüpft werden kann, wie zMöglichkeit","Kontrollkästchen", Und "Radio Tasten”. Es wird hauptsächlich verwendet, um das Verhalten des ausgewählten Wertes dieser Elemente zu ändern.

Syntax

Die Syntax von: Checked lautet:

element_name: überprüft
CSS -Erklärungen;

In CSS -Deklarationen können Sie den Code für den ausgewählten Wert der Option, des Kontrollkästchens und des Radios schreiben.

Wechseln Sie nun zum Menü und ändern Sie die Farbe der ausgewählten Option mit dem: Checked Selector. Um dies zu tun, werden wir verwenden “Möglichkeit”, Um auf die im Menü erstellten Optionen zuzugreifen und“: überprüft”Pseudo-Klasse zur ausgewählten Menüoption. Es ermöglicht das Ändern des Verhaltens der ausgewählten Option. Als nächstes setzen wir die Farbe der ausgewählten Option als "RGB (246, 250, 0)Und der Hintergrund der ausgewählten Option als "RGB (5, 26, 1)”:

Option: überprüft
Farbe: RGB (246, 250, 0);
Hintergrundfarbe: RGB (5, 26, 1);

Wie Sie in der folgenden Ausgabe sehen können, wird der Hintergrund und die ausgewählte Optionsfarbe geändert:

Wir haben die Methode zum Ändern der ausgewählten Optionsfarbe mit dem CSS erklärt.

Abschluss

Der ": überprüft”Der Selektor der Pseudoklasse wird verwendet, um die ausgewählte Optionsfarbe zu ändern. Das: Checked wird zusammen mit dem verwendetMöglichkeit”Aus dem Dropdown-Menü und danach können Sie die Farbe der ausgewählten Option festlegen. In diesem Handbuch wurde die Methode zum Erstellen und Styling des Dropdown-Menüs erläutert und dann die Prozedur zum Ändern der ausgewählten Optionsfarbe mit CSS demonstriert.