Jak rozwijać wybór stylu w CSS
Dopisja to lista opcji, która pojawia się tylko wtedy, gdy użytkownik kliknie lub unosi się na opcję i wybiera jedną lub więcej opcji z podanej listy. Istnieje wiele sposobów stylizowania listy rozwijanej przy użyciu różnych właściwości CSS, na przykład koloru, zawieszonego, pozycji, marginesu i wielu innych.
Jesteśmy tutaj, aby wyjaśnić, jak stylizować menu rozwijane za pomocą CSS. W tym celu najpierw wyjaśnimy proces tworzenia klikalnego menu rozwijanego, a następnie stylizujemy rozwijanie wyboru w CSS.
Jak utworzyć menu rozwijane w CSS?
Możesz utworzyć menu rozwijane w HTML za pomocą i tagi. Aby lepiej zrozumieć, przejdźmy do składni menu rozwijanego.
Składnia
Oto składnia menu rozwijanego:
Stopniowo wyjaśnijmy znaczniki HTML używane w powyższym bloku kodu:
- etykieta: Służy do określenia skróconej opcji w formularzu tekstowym.
- wybierać: Ten element umożliwia użytkownikowi wybranie elementu z listy.
- opcja: Służy do zapewnienia opcji menu rozwijanego.
Tutaj przedstawiamy praktyczny przykład, aby wyjaśnić ten punkt.
Przykład
W danym przykładzie utworzymy a menu rozwijane w nim. Następnie określimy menu za pomocą „”Oznacz i przypisz wartości opcji za pomocą„”Tag. Dodaliśmy elementy w znaczniku, aby pokazać menu na środku ekranu:
Wskazówka Linux
Wybierz name = "select">
Po wykonaniu dostarczonego kodu zostanie wyświetlona następująca menu rozwój:
Jak widać, utworzone menu rozwijane ma prosty wygląd. Możesz jednak stylizować go za pomocą różnych właściwości CSS.
Jak rozwijać wybór stylu w CSS?
W CSS stylizujemy menu rozwijane wyboru w następujący sposób.
Krok 1: Style nagłówka
Zmodyfikujmy kolor nagłówka za pomocą „kolor" nieruchomość:
H1
Zielony kolor;
Tutaj przypisaliśmy „zielony„Kolor nagłówka.
Krok 2: Zmień typ kursora
Zmień typ kursora za pomocą „kursor" nieruchomość. W rezultacie, gdy użytkownik unosi się nad listą menu, kształt kursora zmieni się na wskaźnik Hand:
#wybierać
Kursor: wskaźnik;
Krok 3: Menu rozwijane stylu
Tutaj ustawimy atrybuty menu rozwijanego, przypisując mu kolor tła „LightSeagreen", granica "1Px Solid Black", szerokość "300px”, I wysokość„30px”:
wybierać
Tło: światła światła;
granica: 1px Solid Black;
szerokość: 300px;
Wysokość: 30px;
Po wykonaniu wszystkich tych kroków wykonaj plik HTML i spójrz na wynik:
Wyjście pokazuje, że wygląd naszego menu rozwijanego zostało stylizowane.
Wniosek
CSS oferuje wiele właściwości, których można użyć do stylizowania menu rozwijanych. Na przykład właściwości graniczne, kolor i tła są używane do stylizowania obramowania, koloru i koloru tła menu. W tym artykule wyjaśniono metodę stylizacji menu rozwijanego i sposób przypisania mu różnych atrybutów.