W tym artykule omówimy pole wyboru typu danych wejściowych HTML oraz sposób ich obsługi w PHP.
Pojedyncze pole wyboru
Stwórzmy prosta forma z jednym polem wyboru:
W skrypcie PHP ( checkbox-form.php) możemy pobrać wybraną opcję z tablicy $_POST. Jeśli $_POST['formWheelchair'] to " TAk”, to pole wyboru opcji jest zaznaczone. Jeśli pole wyboru nie zostało zaznaczone, $_POST['formWheelchair'] nie zostanie ustawione.
Oto przykład przetwarzania formularzy w PHP:
$_POST['formSubmit'] został ustawiony na " TAk”, ponieważ ta wartość jest ustawiona w atrybucie pola wyboru wartości:
Zamiast " TAk” można ustawić wartość „ 1 " lub " na”. Upewnij się, że kod walidacji w skrypcie PHP również został zaktualizowany.
Grupa Che-box
Czasami musisz wyświetlić w formularzu grupę powiązanych pól wyboru typu wejściowego PHP. Zaletą grupy pól wyboru jest to, że użytkownik może wybrać wiele opcji. W przeciwieństwie do przycisku radiowego, w którym z grupy można wybrać tylko jedną opcję.
Weźmy powyższy przykład i na jego podstawie udostępnimy użytkownikowi listę budynków:
Zauważ, że pole wyboru typu danych wejściowych ma taką samą nazwę (formDoor ). I że każda nazwa kończy się na . Używając tej samej nazwy, wskazujemy, że pola wyboru są połączone. Za pomocą wskazujemy, że wybrane wartości będą dostępne dla skryptu PHP jako tablica. Oznacza to, że $_POST['formDoor'] zwraca więcej niż jeden wiersz, jak w powyższym przykładzie; zamiast tego zwracana jest tablica składająca się ze wszystkich zaznaczonych wartości pól wyboru.
Na przykład, jeśli zaznaczyłbym wszystkie opcje, $_POST['formDoor'] byłaby tablicą składającą się z: (A, B, C, D, E). Poniżej znajduje się przykład, jak wyświetlić wartość tablicy:
Jeśli żadna opcja nie zostanie wybrana, $_POST['formDoor'] nie zostanie ustawiona, więc użyj funkcji "pustej", aby przetestować ten przypadek. Jeśli podano wartość, przechodzimy przez tablicę za pomocą funkcji count(), która zwraca rozmiar tablicy i wyświetla wybrane budynki.
Jeśli pole wyboru jest zaznaczone dla „ Budynek Żołądź”, tablica będzie zawierać wartość 'A'. Podobnie, jeśli „ Kompleks Carnegie”, tablica będzie zawierać C .
Sprawdzanie, czy wybrano określoną opcję
Często konieczne jest sprawdzenie, czy dana opcja została wybrana spośród wszystkich dostępnych elementów w grupie pól wyboru typu wejściowego HTML. Oto funkcja, która to sprawdza:
function IsChecked($chkname,$value) ( if(!empty($_POST[$chkname])) ( foreach($_POST[$chkname] as $chkval) ( if($chkval == $value) ( zwróć prawdę; ) ) ) zwróć fałsz; )
Aby z niego skorzystać, wystarczy wywołać IsChecked ( checkbox_name, wartość). Na przykład:
if(IsChecked("formDoor","A")) ( //zrób coś... ) //lub użyj w obliczeniach... $price += IsChecked("formDoor","A") ? 100; $cena += IsChecked("formDoor","B") ? 20:0;
Pobierz przykładowy kod
Pobierz przykładowy kod formularza PHP z pola wyboru typu wejściowego PHP .
Niniejsza publikacja jest tłumaczeniem artykułu „ Obsługa pola wyboru w procesorze formularzy PHP» przygotowany przez zaprzyjaźniony zespół projektowy
Wszyscy twórcy stron internetowych, aplikacji internetowych i programów komputerowych wiedzą, czym są pola wyboru. Ale ci ludzie, którzy są daleko od programowania, spotykając się z tak niezrozumiałym obcym słowem, nie rozumieją czego w pytaniu. W rzeczywistości wszystko jest bardzo proste. Pola wyboru to jedna z najprostszych kontrolek podczas tworzenia formularzy.
Zwykły kleszcz
Wszyscy ludzie spotykali się w życiu z takimi symbolami jak haczyk, zaczynając od szkolnej ławki. Podczas testowania należy oznaczyć właściwą opcję tym znakiem. Następnie podczas wypełniania różnych kwestionariuszy. Cóż, w chwili obecnej, gdy użytkownicy wykonują wiele czynności przez Internet, w ogóle nie ma pól wyboru. Nawet prosta rejestracja na dowolnej stronie wymaga zaznaczenia niektórych przedmiotów (hobby, umiejętności).
Rośnie także handel elektroniczny. Podczas tworzenia zamówienia użytkownik zaznacza interesujące go miejsca. I często podczas instalacji gra komputerowa poproszony o wybranie dodatkowego oprogramowanie. I tutaj też musisz dokonać wyboru. Tak więc pola wyboru to te same pola wyboru, które są używane na stronach internetowych.
W tworzeniu stron internetowych
Twórcy stron internetowych widzą ten element nieco szerzej. W końcu tworzenie jest trudniejsze niż jednokrotne kliknięcie na pole i zaznaczenie. Strony internetowe są tworzone przy użyciu hipertekstowego języka znaczników. profesjonalne środowisko nazywa się tylko czterema literami - HTML. Aby utworzyć w nim znacznik wyboru, musisz napisać trochę kodu.
Jak tworzone są pola wyboru? HTML posiada wyspecjalizowany element (tag), który jest polem wyposażonym w typ „checkbox”, który jest napisany w następujący sposób: .
Zasady działania
Taki element działa według najprostszej zasady: albo afirmacja, albo zaprzeczenie. Jeżeli checkbox jest zaznaczony, to przeglądarka internetowa wysyła zmienną, która prześle nazwę pola do serwera do przetworzenia, jeśli checkbox nie jest zaznaczony, to serwer nic nie otrzymuje. Element ma opcjonalny atrybut z wartością wartości, ale jest opcjonalny.
Czasami zdarza się, że na stronie niektóre checkboxy są już zaznaczone. W tym celu programiści dodają do tagu specjalny atrybut, który wskazuje na domyślnie ustawione pole wyboru. Ten atrybut jest sprawdzany, czyli „sprawdzony”.
Pola wyboru to elementy, które nie oznaczają jednego wyboru z kilku opcji, ale oznaczenie wszystkich odpowiednich. Dla dewelopera ma to znaczenie, ponieważ jeśli jeden formularz zawiera kilka pól wyboru, ich nazwy muszą się od siebie różnić.
Zależne pola wyboru
W przypadku, gdy trzeba wybrać tylko jedną opcję z zestawu, używane są inne elementy - przyciski radiowe, a nie checkboxy. Ale czasami używany jest typ, taki jak zależne pola wyboru. HTML, wraz z językiem programowania JavaScript, pozwala na utworzenie jednego głównego pola wyboru, od którego zależą inne. Po kliknięciu na niego można jednocześnie zaznaczyć kilka pól wyboru. Jest to rzadko używane, ponieważ nieco przeczy samej zasadzie tykania.
Podobnie jak wszystkie znaczniki w HTML, pola wyboru to elementy, które mają własne atrybuty. Jacy oni są? Wspomnieliśmy już o atrybucie wstępnego zaznaczenia checkboxa - zaznaczone. Ponieważ pola wyboru muszą mieć różne nazwy w tej samej formie, potrzebny jest atrybut nazwy. Po prostu identyfikuje każde pole wyboru. Atrybut value służy do ustawiania wartości, która zostanie wysłana do serwera.
Pamiętaj, że pola wyboru są elementy graficzne kontrolki używane głównie w formularzach. I działają w trzech trybach: niewybranym, wybranym i nieokreślonym.
Zastosowanie w tabelach
Checkbox jest używany nie tylko w HTML podczas tworzenia stron internetowych i aplikacji internetowych. Oprogramowanie takie jak 1C również wykorzystuje ten element. W końcu przedsiębiorstwo ma wiele różnych komponentów, a podczas pracy z dokumentacją wszystko to należy odnotować. Na przykład za pomocą pola wyboru możesz zaznaczyć listę stanów magazynowych lub odbiorców, do których chcesz wysłać towar.
Jakie inne programy wykorzystują ten element? Excel - każdy zna ten program do arkuszy kalkulacyjnych od Microsoftu, który jest często używany.Zasada checkboxa jest następująca: jeśli checkbox jest zaznaczony, to element zwraca prawdziwą wartość, jeśli nie jest zaznaczony, zwraca fałszywą. Aby wstawić pole wyboru do dokumentu, musisz włączyć specjalną zakładkę dla programisty. Odbywa się to za pomocą parametrów, które są nieco inne w każdej wersji programu Excel.
Jak znaleźć żądane ustawienia? Zawsze jest pomoc lub system wyszukiwania. Po włączeniu zakładki możesz wstawić element za pomocą polecenia „Wstaw” elementu „Sterowanie”. Należy zauważyć, że to menu zawiera również kontrolki ActiveX poniżej wymaganych kontrolek formularza. Są też pola wyboru. Jaka jest różnica między nimi? Aby korzystać z kontrolek ActiveX, potrzebujesz wbudowanego języka programowania VBA, który zna niewiele osób. A zwykłe flagi można od razu przywiązać konkretna komórka w dokumencie.
Po wstawieniu pól wyboru w programie Excel stają się one domyślnie zaznaczone. Gdy klikniesz w dowolnym miejscu w dokumencie, znak zostanie usunięty. Aby odwrócić zaznaczenie, kliknij pole wyboru kliknij prawym przyciskiem myszy myszy, ponieważ lewy przycisk odznacza lub zaznacza pole.
Najeżdżając na pole wyboru, naciskając i przytrzymując lewy przycisk, możesz przenieść element w dowolne miejsce na dokumencie. Wygodnie jest to również zrobić za pomocą klawiszy na klawiaturze. Gdy najedziesz kursorem na rogi elementu, możesz go rozciągnąć do większego rozmiaru lub zmniejszyć. Specjalne ustawienia pozwalają dostosować pole wyboru, zmieniając jego kolor, tło, ramkę.
Wniosek
Tak więc, jak widać z powyższego, checkboxy nie są skomplikowanym elementem. GUI ale z czym wszyscy się spotykają? Życie codzienne- zwykły kleszcz. Koncepcja jest nieco inna dla programisty i zwykłego użytkownika, ale istota jest taka sama: jest to kontrolka, która pozwala na dokonywanie wielu wyborów podczas wypełniania formularza. Ważne jest, aby nie mylić pól wyboru z przyciskami opcji, które pozwalają wybrać tylko jedną pozycję z zestawu.
Aby zaprojektować checkboxy i przyciski radiowe zgodnie z wymogami projektu, dziś nie trzeba używać rozwiązań JavaScript (takich jak moja wtyczka ), ponieważ. do tego możesz używać tylko CSS i z wstecznie kompatybilny dla starszych przeglądarek (tj. nie kosztem użyteczności), które nie obsługują nowoczesnych reguł CSS.
Innymi słowy - in nowoczesne przeglądarki pola wyboru i przyciski radiowe będą wyglądać ładnie, zgodnie z zamierzonym projektem, ale w starych (dotyczy to Internet Explorer wersja 8 i poniżej) pozostaną z "domyślnym" projektem, specyficznym dla każdego konkretnego systemu operacyjnego.
Oprócz, zachowuje możliwość walidacji HTML5 elementy stylizowane (co może nie mieć miejsca w przypadku korzystania z wtyczek JavaScript). W nowoczesnych przeglądarkach jego obsługa od dawna jest normą.
Ważne cechy
Aby odnieść sukces, należy wziąć pod uwagę następujące kwestie:
- Z wyjątkiem samego tagu elementu, który chcemy pięknie wystylizować ( lub ), potrzebujesz tagu
- Etykietka musi być przed tagiem
Sztuczka polega na użyciu pseudoselektorów :checked i :not. Jednocześnie sam checkbox lub przycisk radiowy staje się niewidoczny, a ich emulacja odbywa się za pomocą pseudoelementów: before i: after dla tagu
Stylizacja dla nowoczesnych przeglądarek
Rozważ obie opcje lokalizacji stylizowanego elementu formularza. Który z nich jest najwygodniejszy, zależy od Ciebie. Istota tego się nie zmienia.
Tagi pól wyboru i przycisków radiowych są umieszczane przed tagiem
W kodzie HTML To wygląda tak:
Jeszcze raz chcę zwrócić twoją uwagę - tag koniecznie powinien być zlokalizowany zanim etykietka
Kod CSS pola wyboru będzie tak:
Pole wyboru ( pozycja: bezwzględna; z-index: -1; krycie: 0; margines: 10px 0 0 20px; ) .checkbox + etykieta ( pozycja: względna; dopełnienie: 0 0 0 60px; kursor: wskaźnik; ) .checkbox + etykieta :before ( content: ""; pozycja: bezwzględna; góra: -4px; lewy: 0; szerokość: 50px; wysokość: 26px; obramowanie-promień: 13px; tło: #CDD1DA; box-shadow: wstawka 0 2px 3px rgba( 0,0,0,.2); przejście: .2s; ). -radius: 10px; background: #FFF; box-shadow: 0 2px 5px rgba(0,0,0,.3); przejście: .2s; .checkbox:zaznaczone + label:before ( background: #9FD468; ) .checkbox:zaznaczone + label:after (po lewej: 26px; ) .checkbox:focus + label:before ( box-shadow: wstawka 0 2px 3px rgba(0,0,0,.2), 0 0 0 3px rgba(255,255 ,0,.7);)
Kod CSS przycisku radiowego będzie tak:
Radio ( pozycja: bezwzględna; z-index: -1; krycie: 0; margines: 10px 0 0 7px; ) .radio + etykieta ( pozycja: względna; dopełnienie: 0 0 0 35px; kursor: wskaźnik; ) .radio + etykieta :before ( content: ""; pozycja: bezwzględna; góra: -3px; lewy: 0; szerokość: 22px; wysokość: 22px; obramowanie: 1px solid #CDD1DA; obramowanie-promień: 50%; tło: #FFF; ) . radio + label:after ( content: ""; position: absolute; top: 1px; left: 4px; width: 16px; height: 16px; border-radius: 50%; background: #9FD468; box-shadow: inset 0 1px 1px rgba (0,0,0,.5); krycie: 0; przejście: .2s; ) .radio:checked + label:after ( opacity: 1; ) .radio:focus + label:before ( box-shadow: 0 0 0 3px rgba(255,255,0,.7); )
Dzięki właściwościom position , z-index i opacity klas .checkbox i .radio wizualnie ukrywamy oryginalne elementy, zachowując je w tym samym miejscu, w którym byłyby stylizowane elementy. I za pomocą marginesu przesuwamy je trochę, aby komunikat walidacji HTML5 wyglądał harmonijnie. W zależności od projektu pola wyboru i przycisku radiowego to wcięcie można dostosować.
Tagi pól wyboru i przycisków radiowych znajdują się wewnątrz tagu
Kod HTML w tym przypadku byłoby to:
Analogicznie do poprzedniej wersji – tag koniecznie powinien być zlokalizowany zanim znaczniki z klasą .checkbox__text i .radio__text .
Kod CSS pola wyboru będzie tak:
Wejście pola wyboru ( pozycja: bezwzględna; indeks z: -1; krycie: 0; margines: 10px 0 0 20px; ) .checkbox__text ( pozycja: względne; dopełnienie: 0 0 0 60px; kursor: wskaźnik; ) .checkbox__text:before ( treść: ""; pozycja: bezwzględna; góra: -4px; lewa: 0; szerokość: 50px; wysokość: 26px; promień obramowania: 13px; tło: #CDD1DA; cień pudełka: wstawka 0 2px 3px rgba(0,0 ,0,.2); przejście: .2s; ). background: #FFF;box-shadow: 0 2px 5px rgba(0,0,0,.3);przejście: .2s; ) :zaznaczone + .checkbox__text:after (po lewej: 26px; ) .checkbox input:focus + . checkbox__text:before ( box-shadow: wstawka 0 2px 3px rgba(0,0,0,.2), 0 0 0 3px rgba(255.255.0.7); )
Kod CSS przycisku radiowego będzie tak:
Wejście radiowe ( pozycja: bezwzględna; z-index: -1; krycie: 0; margines: 10px 0 0 7px; ) .radio__text ( pozycja: względna; dopełnienie: 0 0 0 35px; kursor: wskaźnik; ) .radio__text:before ( content: ""; pozycja: bezwzględna; góra: -3px; lewa: 0; szerokość: 22px; wysokość: 22px; obramowanie: 1px solid #CDD1DA; obramowanie-promień: 50%; tło: #FFF; ) .radio_text:after ( content: ""; pozycja: bezwzględna; góra: 1px; lewa: 4px; szerokość: 16px; wysokość: 16px; border-radius: 50%; tło: #9FD468; box-shadow: wstawka 0 1px 1px rgba(0, 0,0,.5); krycie: 0; przejście: .2s; ) .radio input:zaznaczone + .radio__text:after ( krycie: 1; ) .radio input:focus + .radio__text:before ( box-shadow: 0 0 0 3px rgba(255,255,0,.7); )
Style tutaj są takie same jak w poprzedniej metodzie, tylko są stosowane do innych selektorów.
Stylizacja dla starszych przeglądarek
Kod CSS pola wyboru. W komentarzach do kodu dodałem wyjaśnienia dotyczące przeglądarek:
/* Najpierw określ style dla IE8 i starszych wersji, tj. tutaj mamy trochę nobilitujące standardowe pole wyboru. */ .checkbox ( vertical-align: top; width: 17px; height: 17px; margin: 0 3px 0 0; ) /* To jest dla wszystkich przeglądarek z wyjątkiem bardzo starych, które nie obsługują selektorów plus. Pokazujemy, że etykieta jest klikalna. */ .checkbox + label ( cursor: pointer; ) /* Następnie przychodzi stylizacja pola wyboru w nowoczesnych przeglądarkach, a także w IE9 i nowszych. Ze względu na to, że starsze przeglądarki nie obsługują selektorów :not i :checked, wszystkie poniższe style nie będą w nich działać. W tym przypadku check jest podany bez dwukropka na początku, z jakiegoś powodu działa to w ten sposób. */ .checkbox:not(zaznaczone) ( pozycja: bezwzględna; z-index: -1; krycie: 0; margines: 10px 0 0 20px; ) .checkbox:not(zaznaczone) + etykieta ( pozycja: względna; dopełnienie: 0 0 0 60px; ) .checkbox:not(checked) + label:before ( content: ""; position: absolute; top: -4px; left: 0; width: 50px; height: 26px; border-radius: 13px; background : #CDD1DA; box-shadow: inset 0 2px 3px rgba (0,0,0,.2); przejście: .2s; ) .checkbox:not(checked) + label:after ( content: ""; position: absolutne ; góra: -2px; lewa: 2px; szerokość: 22px; wysokość: 22px; promień obramowania: 10px; tło: #FFF; cień pudełka: 0 2px 5px rgba (0,0,0,.3); przejście: .2s; ). rgba(0,0,0,.2), 0 0 0 3px rgba(255,255,0,.7); )
Kod CSS przycisku radiowego:
Radio ( vertical-align: top; width: 17px; height: 17px; margin: 0 3px 0 0; ) .radio + label ( kursor: wskaźnik; ) .radio:not(checked) ( position: absolute; z-index: -1; krycie: 0; margines: 10px 0 0 7px; .radio:not(zaznaczone) + etykieta ( pozycja: względna; dopełnienie: 0 0 0 35px; ) .radio:not(zaznaczone) + label:before ( zawartość : ""; pozycja: bezwzględna; góra: -3px; lewa: 0; szerokość: 22px; wysokość: 22px; obramowanie: 1px solid #CDD1DA; obramowanie-promień: 50%; tło: #FFF; ) .radio:not( zaznaczone) + label:after ( content: ""; position: absolute; top: 1px; left: 4px; width: 16px; height: 16px; border-radius: 50%; background: #9FD468; box-shadow: inset 0 1px 1px rgba (0,0,0,.5); krycie: 0; przejście: .2s; ) .radio:checked + label:after ( opacity: 1; ) .radio:focus + label:before ( box-shadow : 0 0 0 3px rgba(255,255,0,.7); )
Przykłady
Tak to się robi w tak prosty sposób. Dzięki Ta metoda, zaprojektuj pola wyboru i przyciski radiowe z CSS możesz to zrobić tak, jak chcesz.
Witam Was na moim blogu, drodzy czytelnicy zainteresowani budową stron internetowych. Dziś pokażę Wam fajny trik, który pozwoli Wam stworzyć fajne checkboxy, które są dużo ładniejsze niż domyślne oferty html. Pokażę ci jak to się robi projektowanie css pole wyboru Innymi słowy, pokażę ci, jak css piękne pola wyboru (pola wyboru), czyli znaczniki wyboru.
Wstępny znacznik
Musisz więc zacząć od dodania do Kod HTML, która wyświetli nasze pola wyboru, a także ich etykiety (etykieta), pola te muszą być ze sobą połączone, aby po kliknięciu etykiety można było zaznaczyć to pole.
Więc trochę skomentuję. Mamy trzy pary: pole wyboru i etykietę. Każde pole otrzymuje swój własny identyfikator, etykieta jest powiązana z atrybutem for, w którym zapisana jest nazwa identyfikatora, który ma zostać powiązany. Chociaż wszystko na stronie wygląda tak, to znaczy, że jest to normalne wygląd zewnętrzny pola wyboru. Teraz to zmienimy.
Usuwamy wkład, układamy przęsła
Więc teraz musimy ukryć zwykłe pola wyboru na stronie.
Wejście (
Nie wyświetla się;
}
Teraz musimy jakoś uporządkować nowe pola. Stylizujemy elementy span, ponieważ znajdują się one w etykiecie .
Wejście + zakres etykiet (
display:inline-block;
szerokość:40px;
margines prawy: 10px;
wysokość:40px;
wyrównanie w pionie:środek;
obramowanie: 5px stałe zielone;
kursor:wskaźnik;
promień obramowania: 5px
}
Za pomocą tego selektora wybraliśmy wszystkie rozpiętości w etykietach, które znajdują się w kodzie bezpośrednio po danych wejściowych z typem pola wyboru. W ten sposób ozdoba zostanie zastosowana na naszych przęsłach. Dajemy im typ linii blokowej, określoną szerokość i wysokość oraz dopełnienie po prawej stronie, aby tekst nie pasował ciasno.
Sprawiając, że to wszystko działa
Teraz musisz zrobić to tak, aby po kliknięciu wewnątrz zakresu, to znaczy po wybraniu jakiejś opcji, automatycznie został w niej umieszczony znacznik wyboru. Aby to zrobić, najpierw znalazłem w Internecie odpowiednią ikonę ze znacznikiem wyboru (powinna być w format png), zmniejszyliśmy ją do rozmiarów naszego pola. Teraz pozostaje wstawić następujący kod:
Wejście: zaznaczone + zakres etykiet (
background:url(btn.png) bez powtórzeń;
}
Wszystko działa teraz! Spróbuj kliknąć, a zobaczysz, że po wybraniu pojawi się ładny znacznik wyboru. Mój obraz znajdował się w tym samym folderze co plik css i nazywał się btn.png , stąd wpis.
Co więc robi nasz magiczny selektor zakresu input:checked + label? Zasadniczo mówi przeglądarce, co następuje: gdy którekolwiek z pól wyboru jest zaznaczone, złóż wniosek o rozpiętość w etykietach obraz tła. To wszystko, wszystko jest proste, zrobiliśmy bez skryptów, tworząc piękne checkboxy na czystym css. Napisz w komentarzach, jeśli coś nie jest jasne.
Minuta twojej uwagi: Wszyscy chcemy umieszczać nasze witryny na niezawodnym hostingu. Przeanalizowałem setki hostów i znalazłem najlepszy - HostIQ W sieci są setki pozytywnych recenzji, średnia ocena użytkowników to 4,8 na 5. Niech Twoje strony będą dobre.
Dzisiaj dowiesz się jak zrobić checkbox w html i dodaj do tego css style dla lepszej zgodności z projektem witryny.
Demonstracja
Pole wyboru w HTML
Stwórzmy blok z czterema polami wyboru, pierwszy zostanie oznaczony znacznikiem wyboru. Każde pole wyboru zostanie opakowane w tag etykieta, wewnątrz którego pole wejściowe, tekst i element Zakres Do stylizacji.
Etykietka etykieta służy jako pojemnik dla każdego pola wyboru, dla jasności tymczasowo ustawiłem czerwoną ramkę na tag etykieta. Kiedy jest mało doświadczenia, to dobry sposób, zobacz granice dowolnego tagu, aby nie działać na ślepo.
CSS dla pola wyboru
Wbudowany tag etykieta, zastąp blokiem (Blok wyświetlacza) tak, aby pola wyboru znajdowały się jedno pod drugim, wybór użytkownika: brak- Uniemożliwia użytkownikowi wybranie elementu.
Pojemnik(
Blok wyświetlacza;
wybór użytkownika: brak;
}
Ten kod ukrywa domyślne style przeglądarki dla pola wyboru. Sprawiamy, że element jest całkowicie przezroczysty dzięki krycie, szerokość oraz wzrost z wartością null i w ich miejsce ustawiamy niestandardowe style dla pola wyboru.
wejście kontenera (
krycie: 0
wysokość: 0;
szerokość: 0;
}
Utwórz niestandardowe pola wyboru. Zmień rozmiar i kolor tła.
znacznik wyboru (
wysokość: 23px;
szerokość: 22px
kolor tła: #eec321;
}
Po najechaniu kursorem ustaw nieco ciemniejszy kolor tła.
Kontener: najedź kursorem ~ .checkmark (
kolor tła: #ccc678;
}
Dla zaznaczonego pola wyboru ustaw inny kolor tła.
Wejście kontenera: zaznaczone ~ .checkmark (
kolor tła: #2196f3;
}
Ukrywanie pola wyboru dla niezaznaczonych pól wyboru poprzez zastosowanie pseudoelementu po.
znacznik wyboru:po (
zawartość: "";
pozycja: bezwzględna;
Nie wyświetla się;
}
Zaznacz pole wyboru widoczne tylko dla zaznaczonych pól wyboru.
Wejście kontenera: zaznaczone ~ .checkmark:po (
Blok wyświetlacza;
}
Narysuj i stylizuj znacznik wyboru. Rysujemy kleszcza na blankiecie css. Narysujmy prostokąt z białym obramowaniem, dwa boki prostokąta nie mają obramowania (zero szerokości), otrzymujemy prostokątny narożnik, obracamy go o 45 stopni i otrzymujemy znacznik wyboru.
