Jak stylizować pole wyboru niestandardowe bootstrap

Popularny bootstrap CSS Framework pozwala programistom łatwe i szybkie tworzenie mobilnych i responsywnych aplikacji internetowych. Ma setki wstępnie zaprojektowanych klas CSS. Wszystko, co musisz zrobić, to dodać wymaganą klasę do konkretnego elementu. Jednak, aby określić niestandardowe style elementów, można użyć CSS.

Ten zapis obejmie:

• Jaki jest element „” html?
• Jak stylizować pole wyboru niestandardowe bootstrap?

Jaki jest element „” html?

W HTML „The”„Element z typem„pole wyboru„Tworzy pole wyboru na stronie internetowej. Ponadto pola wyboru pozwalają na sprawdzenie więcej niż jednego pola wyboru.

Przykład

Przed przejściem w kierunku głównego tematu tego postu zobaczmy, jak wygląda domyślne pole wyboru. Aby to zrobić, dodaj „”Element z podpisem i określ„„Element z typem„pole wyboru”I atrybut„sprawdzony". „„sprawdzony”Atrybut z wartością„sprawdzony”Domyślnie jest wykorzystywany do zaznaczenia pole:

Domyślny styl wyboru

Wyjście

Jak stylizować pole wyboru niestandardowe bootstrap?

Aby wykonać niestandardowe pole wyboru, wypróbuj poniższe kroki:

Krok 1: Utwórz plik HTML

Najpierw utwórz plik HTML, postępując zgodnie z następującymi instrukcjami:

• Dodać "„Element z„P-4”I klasy„ pojemniki.
• Następnie określ nagłówek za pomocą „

  " element.

• Dodaj trzy „„Elementy i przypisz ich klasę”sprawdzenie niestandardowe".
• W środku "„Elementy, dodaj„„Element z„typ" wartość atrybutu "pole wyboru". Tylko pierwsze wejście musi być powiązane z „sprawdzony" atrybut.
• Na koniec wspomnij o „„Element dla znaku wyboru.

Html

Wybierz menu

Pizza



Burger



Frytki

Poniższe kroki muszą być zaimplementowane w sekcji CSS.

Krok 2: Ukryj domyślne pole wyboru

Ponieważ musimy utworzyć niestandardowe pole wyboru, musi je ukryć. Aby to zrobić, dostęp do „sprawdzenie niestandardowe”Klasa i zastosuj style na„" elementy:

.Wprowadzanie na zamówienie
Pozycja: absolutna;
Krycie: 0;

Tutaj:

• "pozycja”Z„absolutny„Wartość ustawia pozycję elementu w stosunku do jego elementu nadrzędnego.
• "nieprzezroczystość”Z wartością„0„Ukrywa„" elementy.

Krok 3: Styl klasę „sprawdzania niestandardowego”

.sprawdź custom
Rozmiar czcionki: 22px;
Pozycja: względny;
Blok wyświetlacza;
Wyściółka lewica: 35px;
Kursor: wskaźnik;
Bottom marginesowy: 12px;

Wyjaśnienie wyżej wymienionych nieruchomości omówiono poniżej:

• "rozmiar czcionki”Właściwość ustawia rozmiar czcionki elementu.
• "pozycja”Z„względny„Wartość dostosowuje pozycję elementu odpowiadającą jego bieżącym położeniu.
• "wyświetlacz”Z„blok„Wartość daje pełną szerokość etykiet.
• "Padding-Left”Dodaje trochę miejsca po lewej stronie zawartości elementu.
• "kursor”Ustawia styl wskaźnika myszy.
• "-but-ds„Dodaje miejsce na dole elementu.

Krok 4: Utwórz niestandardowe pole wyboru

Aby wykonać niestandardowe pole wyboru, dodaj następujące właściwości CSS:

.Market
Pozycja: absolutna;
Wysokość: 27px;
szerokość: 27px;
TOP: 0;
po lewej: 0;
kolor tła: RGB (233, 233, 233);
RADIUS BRAVES: 10px;

Tutaj:

• "wysokość i szerokość”Właściwości ustawiają rozmiar elementu.
• "TOP ”i„ Left ”z„ 0”Wartości nie określają miejsca u góry i po lewej stronie elementu.
• "kolor tła”Określa kolor tła elementu.
• "Radiusz graniczny„Zaokrągla rogi elementu.

Można zauważyć, że niestandardowe pola wyboru zostały pomyślnie utworzone:

Krok 5: Styl pól wyboru po sprawdzeniu

Poniższe właściwości CSS są zaimplementowane na polu wyboru po sprawdzeniu:

.Wejście do kontroli niestandardowej: sprawdzone ~.Market
kolor tła: #6202cf;
RADIUS BERDER: 5px;

Jak dotąd pola wyboru są stylizowane, jak pokazano w poniższym GIF:

Teraz utwórzmy znak wyboru w poniższych sekcjach.

Krok 6: Utwórz znak wyboru

Aby ukryć znacznik wyboru, gdy jest on niezaznaczony, zaimplementuj wymienione poniżej właściwości:

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

„„.Znak wyboru: po”Wspomniany jest, aby uzyskać dostęp do klasy„Mark kontrolny ”i„: po”Jest pseudoklasy, wykorzystywany do wdrażania stylów po treści:

• "treść”Określa wstawioną treść.
• "wyświetlacz”Z wartością„nic„Ukrywa znak wyboru.

Krok 7: Pokaż znacznik wyboru po sprawdzeniu

Gdy użytkownik sprawdzi pole wyboru, musi wyświetlić znak wyboru. Aby to zrobić, znacznik wyboru jest stosowany z CSS ”wyświetlacz„Własność o wartości”blok”:

.Wejście do kontroli niestandardowej: sprawdzone ~.Market: po
Blok wyświetlacza;

Krok 8: Styl the Check Mark

Oto właściwości CSS, aby utworzyć znak kleszczy:

.sprawdzenie niestandardowe .Market: po
po lewej: 8px;
TOP: 5px;
szerokość: 9px;
Wysokość: 14px;
Border: solidny biały;
szerokość graniczna: 0 3px 3px 0;
Transform: Rotate (45DEG);

Zgodnie z danym kodem:

• "po lewej ”i„ Top”Określ przestrzeń po lewej i górnej stronie znaku kleszcza.
• "Szerokość i wysokość„Dostosuj obszar znaku kleszczy.
• "granica„Własność tworzy znak kleszczy.
• "szerokość granicy„Własność określa górne, prawe, dolne i lewe granice. Tutaj określane są tylko właściwości prawe i dolne.
• "przekształcać„Własność o wartości”Obrócić (45 stopni)”Obraca znak kleszczy na 45 stopni.

Wyjście

Chodziło o to, jak stylizować niestandardowe pole wyboru za pomocą Bootstrap.

Wniosek

Aby stylizować pole wyboru bootstrap niestandardowe, najpierw utwórz stronę HTML. Dodaj "" I "”Z typem„pole wyboru" elementy. Następnie do ich stylizowania używanych jest kilka właściwości CSS. Mówiąc dokładniej, aby wyznaczyć oznaczenie kleszcza, CSS „granica ”i„ szerokość graniczna„Wykorzystane są właściwości. Ten post wyjaśnił, jak stylizować niestandardowe pole wyboru w bootstrapie.