HTML zapewnia różne parametry wejściowe do wstawienia wartości, w tym przyciski, pola tekstowe, pola wyboru, listy uporządkowane/nieopisane i wiele innych. Mówiąc dokładniej, jeśli tworzysz stronę internetową i chcesz, aby odwiedzający mogli wybrać wiele elementów z menu, dodanie pola wyboru jest doskonałym wyborem.

Pole wyboru pozwala użytkownikom wybrać więcej niż jedną opcję z menu.

Ten samouczek okaże się:

• Jak utworzyć pole wyboru z HTML?
• Jak stylizować pola wyboru z CSS?

Jak utworzyć pole wyboru z HTML?

Wykonaj podane kroki w celu utworzenia pola wyboru za pomocą HTML.

Krok 1: Dodaj nagłówek

Dołącz nagłówek na stronie HTML za pomocą

etykietka. Na przykład wykorzystaliśmy tagi nagłówka poziomu 1 „

”I dodał tekst jako„Najlepsze witryny samouczków”:

Najlepsze witryny samouczków

Wyjście

Krok 2: Utwórz pole wyboru

Teraz dodaj etykietę wraz z atrybutem klasy i umieść nazwę etykiety między znacznikami. Następnie zdefiniuj element z typem „pole wyboru„Aby utworzyć pole wyboru o nazwie etykiety:

Linuxhint

Jak widać, pole wyboru jest utworzone pomyślnie z podpisem „Linuxhint”:

Aby dodać kolejną opcję wyboru, ponownie utwórz nową etykietę, osadzaj nazwę etykiety między „„Tagi i wstaw„„Element z typem„pole wyboru”:

Twórcy treści TSL

Można zauważyć, że na stronie internetowej dodaje się wiele skrzynek wyboru:

Przejdźmy do następnej sekcji w celu stylizacji pola wyboru.

Jak stylizować pole wyboru z CSS?

Aby stylizować pole wyboru za pomocą CSS, postępuj zgodnie z danymi instrukcjami.

Krok 1: Zastosuj styl na polu wyboru

Zastosuj następujące właściwości na „.główny„Klasa, która służy do dostępu do elementu:

• Dodaj właściwość wyświetlania, określając wartość „blok„Aby traktować element jako blok.
• Ustaw właściwość pozycji jako „względny”Za zmianę elementu względem siebie i elementu nadrzędnego.
• Ustaw wyściółkę z wartością „45px„Aby ustawić szerokość obszaru wyściółki po lewej i marginesie„ za pomocą ”15px„Wartość tworzenia przestrzeni wokół elementów poza dowolnymi zdefiniowanymi granicami.
• Ustaw rozmiar czcionki etykiety:

.główny
Wyświetlacz: blok; czcionka wielkości: 20px;
Pozycja: względny;
BARGO-Bottom: 15px;
Kursor: wskaźnik; wyściółka-lew: 45px;

Krok 2: Dostosuj pozycję pola wyboru

Ustaw niektóre właściwości CSS na „.Linuxhint„Klasa, aby dostosować pozycję pola wyboru, w następujący sposób:

• Ustaw pozycję jako „absolutny".
• Ustaw wysokość i szerokość jako „25px"
• Ustaw kolor tła jako „czarny”:

.Linuxhint
Pozycja: absolutna; kolor tła: czarny;
TOP: 0;
po lewej: 0;
Wysokość: 25px;
szerokość: 25px;

Krok 3: Ustaw kolor tła, gdy pole wyboru jest „zaznaczone”

Teraz właściwość koloru tła jest używana do ustawienia tego, co zostanie wyświetlone po sprawdzeniu pola wyboru:

.Główne wejście: Sprawdzone ~ .Linuxhint
kolor tła: RGB (231, 209, 12);

Krok 4: Ustaw styl pola wyboru

W tym etapie użyj kodu podwodnego poniżej, aby ustawić właściwość na polu wyboru. Pola wyboru zostanie wyświetlone w polu wyboru po jego sprawdzeniu i nie będzie wyświetlane, gdy nie zostanie sprawdzone:

.Linuxhint: po
treść: "";
Pozycja: absolutna;
Nie wyświetla się;

Teraz ustaw właściwość wyświetlania jako „blok„Aby wyświetlić znak wyboru, gdy zaznaczone jest pole wyboru:

.Główne wejście: Sprawdzone ~ .Linuxhint: po
Blok wyświetlacza;

Na koniec użyj właściwości transformacji CSS w prostokącie pola wyboru, aby granica wyglądała jak „kleszcz" kształt:

.główny .Linuxhint: po
po lewej: 8px;
Dół: 5px;
szerokość: 6px;
Wysokość: 12px;
granica: solidny RGB (250, 238, 238);
szerokość graniczna: 0 4px 4px 0;
Transform: Rotate (45DEG);

Wyjście

Nauczyłeś się najłatwiejszej metody stylizacji pola wyboru za pomocą CSS.

Wniosek

Aby stylizować pole wyboru za pomocą CSS, najpierw utwórz pole wyboru za pomocą HTML. Następnie zdefiniuj atrybut klasy w elemencie HTML i zastosuj CSS na polu wyboru. Następnie stylizuj pola wyboru za pomocą właściwości CSS w klasie, takich jak pozycja wyboru, kolor tła i rozmiar pola wyboru za pomocą właściwości wysokości i szerokości. Ten post wykazał metodę stylizacji pola wyboru za pomocą CSS.