Skupina zaškrtávacích políček. Čistý styl CSS zaškrtávacích políček a přepínačů s kompatibilitou pro starší prohlížeče. Aby to všechno fungovalo

Aby bylo možné navrhnout zaškrtávací políčka a přepínače podle požadavků návrhu, dnes není nutné používat řešení JavaScript (jako můj plugin), protože. k tomu lze použít pouze CSS a se zpětnou kompatibilitou pro starší prohlížeče (tedy nikoli na úkor použitelnosti), které nepodporují moderní pravidla CSS.

Jinými slovy, v moderních prohlížečích budou zaškrtávací políčka a přepínače vypadat krásně v souladu se zamýšleným designem, ale ve starších prohlížečích (to platí pro Internet Explorer verze 8 a nižší) zůstanou ve „výchozím“ designu specifickém pro každý konkrétní operační systém.

Kromě, zachovává možnost ověření HTML5 stylizované prvky (což nemusí být případ použití pluginů JavaScript). V moderních prohlížečích je jeho podpora již dlouho standardem.

Důležité vlastnosti

Abyste uspěli, je důležité zvážit následující:

Ve skutečnosti kromě samotné značky prvku, kterou chceme krásně stylizovat ( nebo ), potřebujete značku , díky kterému můžete prvek přepínat kliknutím na text, a to nejen na prvek samotný.
Štítek musí být před značkou (v tomto případě se stav prvku formuláře přepíná pomocí atributu for), nebo musí být uvnitř značky (v tomto případě není potřeba atribut for, ale je potřeba tag wrapper pro text).

Trik je v použití :checked a :not pseudo-selektorů. Současně je samotné zaškrtávací políčko nebo přepínač neviditelné a jejich emulace se provádí pomocí pseudoprvků: before a: after pro značku nebo výše zmíněný obalový štítek.

Styl pro moderní prohlížeče

Zvažte obě možnosti umístění stylizovaného prvku formuláře. Který z nich je nejpohodlnější, je na vás. Podstata toho se nemění.

Značky zaškrtávacího políčka a přepínače jsou umístěny před značkou

V HTML kódu vypadá to takto:

Přepínám zaškrtávací políčko A přepnu přepínač

Ještě jednou chci upozornit - tag nezbytně by měl být umístěn předštítek . Pokud je vyměníte, nic nebude fungovat.

CSS kód pro zaškrtávací políčko bude takto:

Checkbox ( pozice: absolutní; z-index: -1; neprůhlednost: 0; okraj: 10px 0 0 20px; ) .checkbox + popisek ( pozice: relativní; odsazení: 0 0 0 60px; kurzor: ukazatel; ) .checkbox + popisek :before ( content: ""; pozice: absolutní; nahoře: -4px; vlevo: 0; šířka: 50px; výška: 26px; border-radius: 13px; pozadí: #CDD1DA; box-shadow: inset 0 2px 3px rgba( 0,0,0,.2); přechod: .2s; ) .checkbox + label:after ( content: ""; pozice: absolutní; nahoře: -2px; vlevo: 2px; šířka: 22px; výška: 22px; ohraničení -radius: 10px; pozadí: #FFF; box-shadow: 0 2px 5px rgba(0,0,0,.3); přechod: .2s; ) .checkbox:checked + label:before ( background: #9FD468; ) .checkbox:checked + label:after ( left: 26px; ) .checkbox:focus + label:before ( box-shadow: inset 0 2px 3px rgba(0,0,0,.2), 0 0 0 3px rgba(255,255 ,0,.7); )

CSS kód pro přepínač bude takto:

Rádio ( pozice: absolutní; z-index: -1; neprůhlednost: 0; okraj: 10px 0 0 7px; ) .radio + štítek ( pozice: relativní; odsazení: 0 0 0 35px; kurzor: ukazatel; ) .radio + štítek :before ( content: ""; pozice: absolutní; nahoře: -3px; vlevo: 0; šířka: 22px; výška: 22px; border: 1px solid #CDD1DA; border-radius: 50 %; pozadí: #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); neprůhlednost: 0; přechod: .2s; ) .radio:checked + label:after ( opacity: 1; ) .radio:focus + label:before ( box-shadow: 0 0 0 3px rgba(255,255,0,.7); )

Pomocí vlastností position , z-index a opacity tříd .checkbox a .radio vizuálně skryjeme původní prvky, přičemž je ponecháme na stejném místě, kde by byly stylizované prvky. A pomocí okraje je trochu posuneme, aby zpráva o ověření HTML5 vypadala harmonicky. V závislosti na designu zaškrtávacího políčka a přepínače lze toto odsazení upravit.

Štítky zaškrtávacího políčka a přepínače jsou uvnitř štítku

HTML kód v tomto případě by bylo:

Přepínám zaškrtávací políčko

A přepnu přepínač

Analogicky s předchozí verzí - tag nezbytně by měl být umístěn před tagy s třídou .checkbox__text a .radio__text .

CSS kód pro zaškrtávací políčko bude takto:

Vstup zaškrtávacího pole ( pozice: absolutní; z-index: -1; neprůhlednost: 0; okraj: 10px 0 0 20px; ) .checkbox__text ( pozice: relativní; odsazení: 0 0 0 60px; kurzor: ukazatel; ) .text_zaškrtávacího pole:před ( obsah: ""; pozice: absolutní; nahoře: -4px; vlevo: 0; šířka: 50px; výška: 26px; border-radius: 13px; pozadí: #CDD1DA; box-shadow: vložka 0 2px 3px rgba(0,0 ,0,.2); přechod: .2s; ) .checkbox__text:after ( content: ""; pozice: absolutní; nahoře: -2px; vlevo: 2px; šířka: 22px; výška: 22px; border-radius: 10px; pozadí: #FFF; box-shadow: 0 2px 5px rgba(0,0,0,.3); přechod: .2s; ) :checked + .checkbox__text:after ( left: 26px; ) .checkbox input:focus + . checkbox__text:before ( box-shadow: inset 0 2px 3px rgba(0,0,0,.2), 0 0 0 3px rgba( 255.255.0.7); )

CSS kód pro přepínač bude takto:

Rádiový vstup ( pozice: absolutní; z-index: -1; neprůhlednost: 0; okraj: 10px 0 0 7px; ) .radio__text ( pozice: relativní; odsazení: 0 0 0 35px; kurzor: ukazatel; ) .radio__text:před ( obsah: ""; pozice: absolutní; nahoře: -3px; vlevo: 0; šířka: 22px; výška: 22px; okraj: 1px plný #CDD1DA; border-radius: 50%; pozadí: #FFF; ) .radio_text:after ( obsah: ""; pozice: absolutní; nahoře: 1px; vlevo: 4px; šířka: 16px; výška: 16px; border-radius: 50%; pozadí: #9FD468; box-shadow: vložka 0 1px 1px rgba(0, 0,0,.5); neprůhlednost: 0; přechod: .2s; ) .radio input:checked + .radio__text:after ( opacity: 1; ) .radio input:focus + .radio__text:before ( box-shadow: 0 0 0 3px rgba(255,255,0,.7); )

Styly jsou zde stejné jako v předchozí metodě, pouze se aplikují na jiné selektory.

Styl pro starší prohlížeče

CSS kód pro zaškrtávací políčko. V komentářích ke kódu jsem přidal vysvětlení týkající se prohlížečů:

/* Nejprve určete styly pro IE8 a starší verze, tj. zde jsme trochu zušlechťující standardní zaškrtávací políčko. */ .checkbox ( vertical-align: top; width: 17px; height: 17px; margin: 0 3px 0 0; ) /* Toto je pro všechny prohlížeče kromě velmi starých, které nepodporují selektory plus. Ukážeme, že na štítek lze kliknout. */ .checkbox + label (kurzor: ukazatel; ) /* Dále přichází styl zaškrtávacích políček v moderních prohlížečích, stejně jako IE9 a vyšších. Vzhledem k tomu, že starší prohlížeče nepodporují selektory :not a :checked, nebudou v nich fungovat všechny následující styly. V tomto případě je zaškrtnuto uvedeno bez dvojtečky na začátku, z nějakého důvodu to tak funguje. */ .checkbox:not(zaškrtnuto) ( pozice: absolutní; z-index: -1; neprůhlednost: 0; okraj: 10px 0 0 20px; ) .checkbox:not(zaškrtnuto) + popisek ( pozice: relativní; odsazení: 0 0 0 60px; ) .checkbox:not(zaškrtnuto) + label:before (obsah: ""; pozice: absolutní; nahoře: -4px; vlevo: 0; šířka: 50px; výška: 26px; border-radius: 13px; pozadí : #CDD1DA; box-shadow: inset 0 2px 3px rgba(0,0,0,.2); transition: .2s; ) .checkbox:not(checked) + label:after ( content: ""; position: absolute ; nahoře: -2px; vlevo: 2px; šířka: 22px; výška: 22px; border-radius: 10px; pozadí: #FFF; box-shadow: 0 2px 5px rgba(0,0,0,.3); přechod: .2s; ) .checkbox:checked + label:before ( background: #9FD468; ) .checkbox:checked + label:after ( left: 26px; ) .checkbox:focus + label:before ( box-shadow: inset 0 2px 3px rgba(0,0,0,.2), 0 0 0 3px rgba(255,255,0,.7); )

CSS kód pro přepínač:

Rádio ( svislé zarovnání: nahoře; šířka: 17 pixelů; výška: 17 pixelů; okraj: 0 3 pixely 0 0; ) .radio + štítek ( kurzor: ukazatel; ) .radio:not(zaškrtnuto) ( pozice: absolutní; z-index: -1; neprůhlednost: 0; okraj: 10px 0 0 7px; ) .radio:not (zaškrtnuto) + štítek ( pozice: relativní; odsazení: 0 0 0 35px; ) .radio:není (zaškrtnuto) + štítek:před ( obsah : ""; pozice: absolutní; nahoře: -3px; vlevo: 0; šířka: 22px; výška: 22px; ohraničení: 1px plný #CDD1DA; border-radius: 50 %; pozadí: #FFF; ) .radio:not( zaškrtnuto) + 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); neprůhlednost: 0; přechod: .2s; ) .radio:checked + label:after ( opacity: 1; ) .radio:focus + label:before ( box-shadow : 0 0 0 3px rgba(255,255,0,.7); )

Příklady

Takhle se to dělá jednoduchým způsobem. Díky této metodě můžete stylovat zaškrtávací políčka a přepínače pomocí CSS tak, jak chcete.

Vítám vás na svém blogu, milí čtenáři, kteří se zajímají o tvorbu webových stránek. Dnes vám ukážu skvělý trik, který vám umožní vytvořit skvělá zaškrtávací políčka, která jsou mnohem hezčí než výchozí html nabídky. Ukážu vám, jak se návrh zaškrtávacího políčka provádí v css. Jinými slovy, ukážu vám, jak udělat krásné checkboxy (checkbox) na css, tedy checkmarky.

Počáteční označení

Musíme tedy začít tím, že do html přidáme kód, který zobrazí naše zaškrtávací políčka a také jejich štítky (štítek), tato pole je třeba propojit, abyste po kliknutí na štítek mohli zaškrtnout políčko .

Volba 1 Volba 2 Volba 3

Tak se trochu vyjádřím. Máme tři páry: pole zaškrtávacího políčka a pro něj štítek. Každé pole má svůj vlastní identifikátor, štítek je spojen s atributem for, kde je zapsán název identifikátoru, který má být přidružen. Zatím vše na stránce vypadá takto, to znamená, že toto je obvyklý vzhled zaškrtávacích políček. Nyní to změníme.

Odebereme vstup, uspořádáme rozpětí

Nyní tedy musíme ze stránky skrýt běžná zaškrtávací políčka.

Vstup (
displej:žádný;
}

Nyní musíme nějak zařídit nová pole. Upravíme styl prvků span, protože jsou uvnitř štítku.

Vstup + rozsah štítku(
displej:inline-block;
šířka:40px;
pravý okraj: 10px;
výška:40px;
vertical-align:middle;
ohraničení: 5px plná zelená;
kurzor:ukazatel;
border-radius: 5px
}

Tímto selektorem jsme vybrali všechny rozpětí v popiscích, které jsou v kódu hned za vstupy s typem checkboxu. Takto bude dekorace aplikována na naše rozpětí. Dáme jim typ blokové čáry, konkrétní šířku a výšku a odsazení vpravo, aby text těsně nezapadal.

Aby to všechno fungovalo

Nyní to musíte udělat tak, že když kliknete do rozpětí, to znamená, když vyberete nějakou možnost, automaticky se do něj zaškrtne. K tomu jsem nejprve na internetu našel odpovídající ikonu se zaškrtnutím (musí být ve formátu png), zmenšil jsem ji na velikost našeho pole. Nyní zbývá vložit následující kód:

Vstup: zaškrtnuto + rozsah štítku(
background:url(btn.png) bez opakování;
}

Všechno teď funguje! Zkuste kliknout a uvidíte, že se po výběru zobrazí pěkné zaškrtnutí. Můj obrázek byl ve stejné složce jako soubor css a jmenoval se btn.png , odtud ten záznam.

Co tedy dělá náš magic input:checked + label span selector? V podstatě to prohlížeči sděluje následující: když je zaškrtnuto některé ze zaškrtávacích políček, aplikujte obrázek na pozadí na rozpětí ve štítcích. To je vše, vše je jednoduché, obešli jsme se bez skriptů a udělali jsme krásná zaškrtávací políčka na čistém css. Napište do komentářů, pokud vám něco není jasné.

Minuta vaší pozornosti: Všichni chceme umístit naše stránky na spolehlivý hosting. Analyzoval jsem stovky hostitelů a našel jsem toho nejlepšího - HostIQ V síti jsou o něm stovky pozitivních recenzí, průměrné uživatelské hodnocení je 4,8 z 5. Ať jsou vaše stránky dobré.

Zaškrtávací políčko ve formě HTML nebo "zaškrtávací políčko" je dáno značkou vstup, který má typ zaškrtávací políčko.

Zaškrtnutí označuje souhlas nebo nesouhlas. Pokud je zaškrtávací políčko zaškrtnuté, prohlížeč odešle na server proměnnou s názvem pole. Pokud chybí, prohlížeč tedy nic neodesílá. Proto ten atribut hodnota nelze považovat za povinné.

Pokud je potřeba, aby zaškrtávací políčko bylo přítomno ve výchozím nastavení, musíte přidat atribut do značky kontrolovány. Bude to vypadat takto:

A takto vypadá zaškrtávací políčko v prohlížeči:

Přítomnost zaškrtávacího políčka neznamená, že z přítomných musí být vybrán jeden prvek. V tomto ohledu, pokud je v jednom formuláři několik zaškrtávacích políček, měla by mít různá jména.

Kód pro formulář uvedený na začátku článku bude následující:

Pokud jde o název, v profesionálním prostředí se oboru říká „checkbox“.

Díky CSS3 můžeme na obrazovce dosáhnout téměř jakéhokoli efektu, který potřebujeme. V tomto tutoriálu se podíváme na to, jak můžeme stylizovat zaškrtávací políčka a přepínače.

Input:checked + label:before ( content: "\2022"; barva: #f3f3f3; font-size: 30px; text-align: center; line-height: 18px; )

Nyní, když stiskneme přepínač, měl by se v hlavním šedém kruhu objevit malý bílý kruh.

Styling zaškrtávacích políček

Nyní přejdeme ke stylizaci zaškrtávacích políček. Nejprve prvek znovu skryjme:

Vstup (zobrazení: žádné; )

Protože odstraňujeme výchozí zobrazení zaškrtávacího políčka s pseudoprvkem :before, přidáme pouze ohraničení:

Štítek zaškrtávacího políčka:před (poloměr okraje: 3px; )

Poté přidáme symbol zaškrtnutí, který se objeví po kliknutí na zaškrtávací políčko. Udělejme to analogicky s rádiovým kruhem. Musíme tentokrát převést znak HTML? ✓.

Input:checked + label:before ( content: "\2713"; text-shadow: 1px 1px 1px rgba(0, 0, 0, .2); font-size: 15px; color: #f3f3f3; text-align: center ; výška řádku: 15px; )

Nakonec bychom měli dostat toto:

Výsledek

V tomto tutoriálu jsme se podívali na metodu, kterou můžete použít k zobrazení přepínacích tlačítek a zaškrtávacích políček, která potřebujete. Protože jsme použili CSS3, bude tato technika fungovat pouze v prohlížečích, které tuto technologii podporují. Chcete-li dosáhnout podobných výsledků ve starších prohlížečích, můžete použít příslušné

Tento průvodce vás seznámí HTML checkboxy a naučí vás, jak s nimi zacházet v PHP.

Formulář s jedním zaškrtávacím políčkem

Vytvořme jednoduchý formulář s jediným zaškrtávacím políčkem.

V PHP skriptu (soubor checkbox-form.php) je možné číst hodnotu pole pomocí pole $_POST. Pokud je $_POST["formWheelchair"] nastaveno na ANO, pak bylo zaškrtávací políčko zaškrtnuto. Pokud zaškrtávací políčko není zaškrtnuto, pak proměnná $_POST["formWheelchair"] není nastavena.

Zde je příklad zpracování formuláře v PHP:

Proměnná $_POST["formWheelchair"] je nastavena na YES, protože atribut value vstupní značky je "YES" .

Vezměte prosím na vědomí, že všechna zaškrtávací políčka mají stejný název (formDoor). Jedno jméno říká, že všechna zaškrtávací políčka spolu souvisí. Hranaté závorky označují, že všechny hodnoty budou dostupné ze stejného pole. To znamená, že $_POST["formDoor"] nevrátí řetězec, jako ve výše uvedeném příkladu, místo toho vrátí pole obsahující hodnoty zaškrtávacích políček, které vybral uživatel.

Pokud například zaškrtnu všechna zaškrtávací políčka, $_POST["formDoor"] vrátí pole (A,B,C,D,E) . V níže uvedeném příkladu získáme a zobrazíme všechny hodnoty v poli.

Prázdná funkce je užitečná v případě, že uživatel nic nevybral. Pokud pole není prázdné, spočítáme počet vybraných zaškrtávacích políček pomocí funkce count a všechny hodnoty vypíšeme pomocí cyklu for.

Pokud je zaškrtnuto políčko "Stavba žaludu", pole bude obsahovat hodnotu "A".

Kontrola, zda je zaškrtnuto konkrétní zaškrtávací políčko

Často chcete zkontrolovat, zda je zaškrtnuto určité zaškrtávací políčko. K tomu můžete použít následující funkci:

Funkce IsChecked($chkname,$value) (if(!empty($_POST[$chkname])) (foreach($_POST[$chkname] jako $chkval) ( if($chkval == $value) ( return true; ) ) ) return false; )

Nyní stačí zavolat funkci IsChecked(chkboxname, value). Například:

If(IsChecked("formDoor","A")) ( //do ... )