Opcje są podawane użytkownikowi, gdy istnieje wiele wartości jednego elementu, od których użytkownicy mogą wybrać opcję zgodnie z ich preferencjami. Istnieje w różnych formularzach, takich jak pole wyboru, menu rozwijane i przycisk opcji. Mówiąc dokładniej, rozwijane menu zawiera predefiniowane listy opcji, które pozwalają użytkownikowi wybrać jedną.

Niniejszy podręcznik wyjaśni procedurę modyfikacji koloru wybranej opcji. W tym celu najpierw utworzymy rozwijane menu i stylizujemy je za pomocą CSS, a następnie zmienimy wybrany kolor opcji.

Zacznijmy!

Jak utworzyć rozwijane menu za pomocą HTML i CSS?

W HTML możesz utworzyć menu rozwijane za pomocą „”,„" I "”Tagi. Aby lepiej zrozumieć, przejdźmy do składni menu rozwijanego.

Składnia

Oto składnia menu rozwijanego:

Tekst

opcja 1
Opcja 2
…
opcja

Wyjaśnijmy znaczniki HTML używane w powyższej składni:

• : Służy do określenia skróconej opcji w formularzu tekstowym.
• : Ten element umożliwia użytkownikowi wybranie elementu z listy.
• : Służy do zapewnienia opcji menu rozwijanego.

Tutaj przedstawiamy praktyczny przykład wyjaśnienia powyższej składni.

Krok 1: Utwórz menu rozwijane

Po pierwsze, utworzymy a i dodamy nagłówek za pomocą

etykietka. Aby dodać rozwijane menu w nim, użyjemy znacznika etykiet i dodamy „dodamy”Wybierz kraj”Jako etykieta. Następnie użyjemy znacznika, aby opcje będą delekteczne dla użytkownika i przypisać wartości opcji za pomocą „”Tag.

Html

Linux

Wybierz kraj:


Niemcy
Iran
Indyk
Indie
Chiny

Notatka: Użyliśmy „Ukryty wybrany" sprecyzować "-Wybierz opcję-”Jako opcja domyślna. Ale kiedy użytkownik wybierze jeden z nich, zostanie on ukryty.

Odtąd pójdziemy do CSS i stylizujemy.

Krok 2: Menu rozwijane w stylu za pomocą CSS

Użyjemy "div„Aby uzyskać dostęp do utworzonego pojemnika i ustawić kolor tła Div jako„RGB (191, 207, 235)". Ustawimy również wysokość div, rozmiar czcionki tekstu i kolor tekstu jako „150px”,„X-Large", I "RGB (2, 0, 0)”Odpowiednio. Następnie ustawimy granicę Div jako „5px”,„grzbiet", I "RGB (108, 75, 209)".

CSS

div
kolor tła: RGB (191, 207, 235);
Wysokość: 150px;
Rozmiar czcionki: X-Large;
Kolor: RGB (2, 0, 0);
granica: 5px Ridge RGB (108, 75, 209);

Teraz stylizujemy menu rozwijane i ustawym kolor tła menu jako „RGB (194, 222, 209)”I granica menu jako„3px”,„solidny", I "RGB (84, 73, 116)". Następnie ustawimy szerokość, wysokość i rozmiar czcionki menu jako „300px”,„30px" I "duży”Odpowiednio:

wybierać
Tło: RGB (194, 222, 209);
granica: 3px Solid RGB (84, 73, 116);
szerokość: 300px;
Wysokość: 30px;
Rozmiar czcionki: duży;

Jak widać z wyjścia, menu rozwijane jest tworzone i skutecznie stylizowane za pomocą HTML i CSS:

W powyższym wyjściu można zauważyć, że menu rozwijane jest tworzone i pozwala wybrać dowolną opcję zgodnie z preferencjami. Przechodzimy do następnej sekcji, gdzie zmienimy wybrany kolor opcji za pomocą CSS.

Jak zmienić kolor wybranej opcji za pomocą CSS?

Aby zmienić wybrany kolor opcji menu, „:sprawdzony„Używana jest selektor CSS. : Sprawdzony jest pseudokliczny element, który można połączyć tylko z elementami typu wejściowego, takimi jak „opcja”,„pole wyboru", I "radio guziki". Służy głównie do zmiany zachowania wybranej wartości tych elementów.

Składnia

Składnia: Sprawdzona to:

Element_name: sprawdzony
Deklaracje CSS;

W deklaracjach CSS można napisać kod wybranej wartości opcji, pola wyboru i radia.

Teraz przejdź do menu i zmień kolor wybranej opcji za pomocą: Sprawdź selektor. Aby to zrobić, użyjemy „opcja„Aby uzyskać dostęp do opcji utworzonych w menu i„:sprawdzony„Pseudoklasa do wybranej opcji menu. Umożliwia zmianę zachowania wybranej opcji. Następnie ustawimy kolor wybranej opcji jako „RGB (246, 250, 0)”I tło wybranej opcji jako„RGB (5, 26, 1)”:

Opcja: sprawdzony
Kolor: RGB (246, 250, 0);
kolor tła: RGB (5, 26, 1);

Jak widać przy następujących wyjściach, zmienia się tło i wybrany kolor opcji:

Wyjaśniliśmy metodę zmiany wybranego koloru opcji za pomocą CSS.

Wniosek

„„:sprawdzony„Selektor pseudo-klasy służy do zmiany wybranego koloru opcji. : Sprawdzone jest wykorzystywane wraz z „opcja”Z menu rozwijanego, a następnie możesz ustawić kolor wybranej opcji. Ten podręcznik wyjaśnił metodę tworzenia i stylizacji menu rozwijanego, a następnie zademonstrował procedurę zmiany wybranego koloru opcji za pomocą CSS.