Jak zmienić wybrany kolor opcji za pomocą CSS
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:
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
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.