Vďaka CSS3 môžeme na obrazovke dosiahnuť takmer akýkoľvek efekt, ktorý potrebujeme. V tomto návode sa pozrieme na to, ako môžeme upraviť štýl začiarkavacích políčok a prepínačov.
Input:checked + label:before ( content: "\2022"; farba: #f3f3f3; font-size: 30px; text-align: center; line-height: 18px; )
Keď teraz stlačíme prepínač, v hlavnom sivom kruhu by sa mal objaviť malý biely kruh.
Štýlové začiarkavacie políčka
Teraz prejdime k štýlu začiarkavacích políčok. Najprv prvok znova skryjeme:
Vstup (zobrazenie: žiadne; )
Keďže odstraňujeme predvolené zobrazenie začiarkavacieho políčka s pseudoprvkom :before, pridáme len orámovanie:
Označenie začiarkavacieho políčka:pred (polomer okraja: 3px; )
Potom pridáme symbol začiarknutia, ktorý sa zobrazí po kliknutí na začiarkavacie políčko. Urobme to analogicky s rádiovým kruhom. Potrebujeme tentokrát previesť 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 riadku: 15px; )
Nakoniec by sme mali dostať toto:
Výsledky
V tomto návode sme sa zamerali na metódu, ktorú môžete použiť na zobrazenie prepínačov a začiarkavacích políčok, ktoré potrebujete. Keďže sme použili CSS3, táto technika bude fungovať iba v prehliadačoch, ktoré túto technológiu podporujú. Ak chcete dosiahnuť podobné výsledky v starších prehliadačoch, môžete použiť príslušné
Aby bolo možné navrhnúť zaškrtávacie políčka a prepínače tak, ako to vyžaduje dizajn, dnes nie je potrebné používať riešenia JavaScript (ako môj plugin), pretože. na to môžete použiť iba CSS as spätne kompatibilné pre staršie prehliadače (t.j. nie na úkor použiteľnosti), ktoré nepodporujú moderné pravidlá CSS.
Inými slovami - v moderné prehliadače začiarkavacie políčka a prepínače budú vyzerať pekne podľa zamýšľaného dizajnu, ale v starých (to platí pre internet Explorer verzia 8 a nižšia) zostanú s „predvoleným“ dizajnom, špecifickým pre každý konkrétny operačný systém.
okrem toho zachováva možnosť overenia HTML5štylizované prvky (čo nemusí platiť pri používaní JavaScript pluginov). V moderných prehliadačoch je jeho podpora už dlho štandardom.
Dôležité vlastnosti
Aby ste uspeli, je dôležité zvážiť nasledovné:
- V skutočnosti s výnimkou samotnej značky prvku, ktorú chceme krásne upraviť ( alebo ), potrebujete značku
- Tag musí byť pred značkou
Trik je v použití :checked a :not pseudo-selektorov. Zároveň je samotné začiarkavacie políčko alebo prepínač neviditeľný a ich emulácia sa vykonáva pomocou pseudoprvkov: pred a: po pre značku
Štýl pre moderné prehliadače
Zvážte obe možnosti umiestnenia štylizovaného prvku formulára. Ktorý z nich je najpohodlnejší, je len na vás. Podstata tohto sa nemení.
Značky začiarkavacieho políčka a prepínača sú umiestnené pred značkou
V HTML kóde vyzerá to takto:
Ešte raz chcem upozorniť - tag nevyhnutne by sa malo nachádzať predtým tag
CSS kód pre začiarkavacie políčko bude takto:
Checkbox ( pozícia: absolútna; z-index: -1; nepriehľadnosť: 0; okraj: 10px 0 0 20px; ) .checkbox + label ( pozícia: relatívna; padding: 0 0 0 60px; kurzor: ukazovateľ; ) .checkbox + label :before ( content: ""; pozícia: absolútna; hore: -4px; vľavo: 0; šírka: 50px; výška: 26px; border-radius: 13px; pozadie: #CDD1DA; box-shadow: inset 0 2px 3px rgba( 0,0,0,.2); prechod: .2s; ) .checkbox + label:after ( content: ""; pozícia: absolútna; hore: -2px; vľavo: 2px; šírka: 22px; výška: 22px; orámovanie -radius: 10px; pozadie: #FFF; box-shadow: 0 2px 5px rgba(0,0,0,.3); prechod: .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 pre prepínač bude takto:
Rádio ( pozícia: absolútna; z-index: -1; nepriehľadnosť: 0; okraj: 10px 0 0 7px; ) .radio + štítok ( pozícia: relatívna; výplň: 0 0 0 35px; kurzor: ukazovateľ; ) .radio + štítok :before ( content: ""; pozícia: absolútna; hore: -3px; vľavo: 0; šírka: 22px; výška: 22px; okraj: 1px plný #CDD1DA; border-radius: 50%; pozadie: #FFF; ) . rádio + štítok:po ( content: ""; pozícia: absolútna; hore: 1px; vľavo: 4px; šírka: 16px; výška: 16px; border-radius: 50%; pozadie: #9FD468; box-shadow: inset 0 1px 1px rgba(0,0,0,.5); nepriehľadnosť: 0; prechod: .2s; ) .radio:checked + label:after ( opacity: 1; ) .radio:focus + label:before ( box-shadow: 0 0 0 3px rgba(255,255,0,.7); )
Pomocou vlastností position , z-index a opacity tried .checkbox a .radio vizuálne skryjeme pôvodné prvky, pričom ich ponecháme na rovnakom mieste, kde by boli štylizované prvky. A pomocou okraja ich trochu posunieme, aby správa overenia HTML5 vyzerala harmonicky. V závislosti od dizajnu začiarkavacieho políčka a prepínača je možné túto zarážku upraviť.
Značky začiarkavacieho políčka a prepínača sú vo vnútri značky
HTML kód v tomto prípade by to bolo:
Analogicky s predošlá verzia- štítok nevyhnutne by sa malo nachádzať predtým tagy s triedou .checkbox__text a .radio__text .
CSS kód pre začiarkavacie políčko bude takto:
Vstup začiarkavacieho poľa ( pozícia: absolútna; index z: -1; nepriehľadnosť: 0; okraj: 10 pixelov 0 0 20 pixelov; ) .text_začiarkavacieho poľa (pozícia: relatívna; výplň: 0 0 0 60 pixelov; kurzor: ukazovateľ; ) .text_začiarkavacieho poľa:pred ( obsah: ""; pozícia: absolútna; hore: -4px; vľavo: 0; šírka: 50px; výška: 26px; polomer okraja: 13px; pozadie: #CDD1DA; box-shadow: vložka 0 2px 3px rgba(0,0 ,0,.2); prechod: .2s; ) .checkbox_text:after ( content: ""; pozícia: absolútna; hore: -2px; vľavo: 2px; šírka: 22px; výška: 22px; okraj-polomer: 10px; background: #FFF; box-shadow: 0 2px 5px rgba(0,0,0,.3); prechod: .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 pre prepínač bude takto:
Rádiový vstup ( pozícia: absolútna; z-index: -1; nepriehľadnosť: 0; okraj: 10px 0 0 7px; ) .radio__text ( pozícia: relatívna; výplň: 0 0 0 35px; kurzor: ukazovateľ; ) .radio__text:pred ( content: ""; pozícia: absolútna; hore: -3px; vľavo: 0; šírka: 22px; výška: 22px; okraj: 1px plný #CDD1DA; border-radius: 50%; background: #FFF; ) .radio_text:after ( content: ""; pozícia: absolútna; hore: 1px; vľavo: 4px; šírka: 16px; výška: 16px; border-radius: 50%; pozadie: #9FD468; box-shadow: inset 0 1px 1px rgba(0, 0,0,.5); nepriehľadnosť: 0; prechod: 0,2 s; ) .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); )
Štýly sú tu rovnaké ako v predchádzajúcej metóde, len sa aplikujú na iné selektory.
Štýl pre staršie prehliadače
CSS kód pre začiarkavacie políčko. V komentároch ku kódu som pridal vysvetlenia týkajúce sa prehliadačov:
/* Najprv určte štýly pre IE8 a staršie verzie, t.j. tu sme trochu zušľachťujúce štandardné zaškrtávacie políčko. */ .checkbox ( vertical-align: top; width: 17px; height: 17px; margin: 0 3px 0 0; ) /* Toto je pre všetky prehliadače okrem veľmi starých, ktoré nepodporujú selektory plus. Ukážeme, že na štítok sa dá kliknúť. */ .checkbox + label (kurzor: ukazovateľ; ) /* Ďalej prichádza štýl začiarkavacieho políčka v moderných prehliadačoch, ako aj v IE9 a novších. Vzhľadom na to, že staršie prehliadače nepodporujú selektory :not a :checked, nebudú v nich fungovať všetky nasledujúce štýly. V tomto prípade je začiarknuté bez dvojbodky na začiatku, z nejakého dôvodu to tak funguje. */ .checkbox:not(zaškrtnuté) ( pozícia: absolútna; z-index: -1; nepriehľadnosť: 0; okraj: 10px 0 0 20px; ) .checkbox:not(začiarknuté) + štítok (pozícia: relatívna; odsadenie: 0 0 0 60px; ) .checkbox:not(začiarknuté) + label:before ( content: ""; pozícia: absolútna; hore: -4px; vľavo: 0; šírka: 50px; výška: 26px; border-radius: 13px; pozadie : #CDD1DA; box-shadow: inset 0 2px 3px rgba(0,0,0,.2); transition: .2s; ) .checkbox:not(checked) + label:after ( content: ""; position: absolute ; hore: -2px; vľavo: 2px; šírka: 22px; výška: 22px; polomer okraja: 10px; pozadie: #FFF; box-shadow: 0 2px 5px rgba(0,0,0,.3); prechod: .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 pre prepínač:
Rádio ( vertikálne zarovnanie: hore; šírka: 17 pixelov; výška: 17 pixelov; okraj: 0 3 pixely 0 0; ) .radio + štítok ( kurzor: ukazovateľ; ) .radio:not(začiarknuté) ( pozícia: absolútna; z-index: -1; nepriehľadnosť: 0; okraj: 10px 0 0 7px; ) .radio:not(začiarknuté) + štítok (pozícia: relatívna; odsadenie: 0 0 0 35px; ) .radio:nezačiarknuté (začiarknuté) + štítok:pred (obsah : ""; pozícia: absolútna; hore: -3px; vľavo: 0; šírka: 22px; výška: 22px; orámovanie: 1px plný #CDD1DA; border-radius: 50%; background: #FFF; ) .radio:not( začiarknuté) + label:after ( content: ""; pozícia: absolútna; hore: 1px; vľavo: 4px; šírka: 16px; výška: 16px; border-radius: 50%; background: #9FD468; box-shadow: inset 0 1px 1px rgba(0,0,0,.5); nepriehľadnosť: 0; prechod: .2s; ) .radio:checked + label:after ( opacity: 1; ) .radio:focus + label:before ( box-shadow : 0 0 0 3px rgba(255,255,0,.7); )
Príklady
Takto sa to robí jednoduchým spôsobom. Vďaka túto metódu, navrhnite začiarkavacie políčka a prepínače pomocou pomocou CSS môžete to urobiť tak, ako chcete.
V tomto článku si povieme o zaškrtávacom poli typu vstupu HTML a o tom, ako sa s nimi zaobchádza v PHP.
Jedno začiarkavacie políčko
Vytvorme jednoduchý formulár s jedným zaškrtávacím políčkom:
V PHP skripte ( checkbox-form.php) môžeme získať vybranú možnosť z poľa $_POST. Ak $_POST['formWheelchair'] je " Áno“, potom je začiarknuté políčko pre túto možnosť. Ak začiarkavacie políčko nebolo nastavené, $_POST['formWheelchair'] sa nenastaví.
Tu je príklad spracovania formulárov v PHP:
$_POST['formSubmit'] bolo nastavené na " Áno”, keďže táto hodnota je nastavená v atribúte začiarkavacieho políčka hodnoty:
Namiesto " Áno“môžete nastaviť hodnotu” 1 " alebo " na". Uistite sa, že je aktualizovaný aj overovací kód v skripte PHP.
Che-boxová skupina
Niekedy je potrebné vo formulári zobraziť skupinu súvisiacich začiarkavacích políčok typu vstupu PHP. Výhodou skupiny začiarkavacích políčok je, že používateľ môže vybrať viacero možností. Na rozdiel od prepínača, kde je možné vybrať zo skupiny iba jednu možnosť.
Zoberme si vyššie uvedený príklad a na základe neho poskytneme používateľovi zoznam budov:
Upozorňujeme, že začiarkavacie políčko typu vstupu má rovnaký názov (formDoor ). A že každé meno končí na . Použitím rovnakého názvu naznačujeme, že začiarkavacie políčka sú prepojené. Pomocou označíme, že vybrané hodnoty budú dostupné pre skript PHP ako pole. To znamená, že $_POST['formDoor'] vráti viac ako jeden riadok, ako v príklade vyššie; namiesto toho sa vráti pole pozostávajúce zo všetkých hodnôt začiarkavacích políčok, ktoré boli vybraté.
Napríklad, ak som vybral všetky možnosti, $_POST['formDoor'] by bolo pole pozostávajúce z: (A, B, C, D, E). Nasleduje príklad, ako zobraziť hodnotu poľa:
Ak nie je vybratá ani jedna možnosť, $_POST['formDoor'] sa nenastaví, takže na otestovanie tohto prípadu použite funkciu "prázdne". Ak je zadaná hodnota, potom prechádzame cez pole pomocou funkcie count(), ktorá vráti veľkosť poľa a vytlačí budovy, ktoré boli vybraté.
Ak je začiarknuté políčko „ Stavba žaluďa", potom pole bude obsahovať hodnotu 'A'. Podobne, ak " Carnegieho komplex", pole bude obsahovať C .
Kontrola, či je vybratá konkrétna možnosť
Často chcete skontrolovať, či je konkrétna možnosť vybratá zo všetkých dostupných prvkov v skupine začiarkavacích políčok typu vstupu HTML. Tu je funkcia, ktorá túto kontrolu vykoná:
function IsChecked($chkname,$value) (if(!empty($_POST[$chkname])) (foreach($_POST[$chkname] ako $chkval) ( if($chkval == $value) ( return true; ) ) ) return false; )
Ak ho chcete použiť, zavolajte IsChecked ( checkbox_name, value). Napríklad:
if(IsChecked("formDoor","A")) ( //urobte niečo... ) //alebo použite vo výpočte... $price += IsChecked("formDoor","A") ? 100; $price += IsChecked("formDoor","B") ? 20:0;
Stiahnite si vzorový kód
Stiahnite si vzorový kód formulára PHP zo začiarkavacieho políčka Typ vstupu PHP.
Táto publikácia je prekladom článku " Zaškrtávacie políčko manipulácie v a PHP formulár procesor» pripravil priateľský projektový tím
Označte začiarknutie HTML formulár, alebo "zaškrtávacie políčko" je nastavené značkou vstup, ktorý má typ začiarkavacie políčko.
Značka začiarknutia označuje súhlas alebo nesúhlas. Ak je políčko začiarknuté, prehliadač odošle na server premennú s názvom poľa. Ak chýba, prehliadač preto nič neposiela. Preto ten atribút hodnotu nemožno považovať za povinné.
Ak je potrebné, aby bolo začiarkavacie políčko prítomné v predvolenom nastavení, musíte do značky pridať atribút skontrolované. Bude to vyzerať takto:
A takto vyzerá začiarkavacie políčko v prehliadači:
Prítomnosť začiarkavacieho políčka neznamená, že z prítomných musí byť vybratý jeden prvok. V tomto ohľade, ak existuje niekoľko začiarkavacích políčok v jednom formulári, mali by mať rôzne názvy.
Kód pre formulár uvedený na začiatku článku bude nasledujúci:
Čo sa týka názvu, v profesionálnom prostredí sa pole nazýva „checkbox“.
Dobrý deň, milí čitatelia stránky. Ďalší prvok, ktorý dnes stihneme rozobrať prepínače a začiarkavacie políčka v html. Zvyčajne sa používajú na položenie otázky vo formulári (hovorili sme o vytváraní formulárov) a podľa toho prostredníctvom nich môžeme ponúknuť osobe možnosti odpovede. Môže si však vybrať len jednu z týchto možností.
Prepínače - typ rádia
Začnime implementovať prepínače. Prejdime ku kódu a vyberieme samostatný odsek pre prepínače. V ňom vytvoríme náš prepínač. Tlačidlo je vytvorené pomocou značky vstup.
Uveďte typ rádio. Dajme tlačidlu názov a špecifikujme hodnotu, t.j. aká hodnota bude odoslaná psovodovi, ak je toto tlačidlo aktívne. Pre toto tlačidlo zadáme hodnotu " Áno“, pretože toto tlačidlo bude zodpovedné za pozitívnu odozvu.
Pridajme štítok štítok s odpoveďou" Áno“, takže osoba klikne na štítok a tlačidlo sa aktivuje automaticky.
Teraz preň vytvoríme opačné tlačidlo s odpoveďou " nie". Ak to chcete urobiť, skopírujte štítok a vložte po prvom štítok. Zmeňte „Áno“ na „Nie“ a zmeňte hodnotu „áno“ na „nie“. Upozorňujeme, že názov musíme ponechať rovnaký. To prehliadaču oznámi, že tieto prepínače patria do rovnakej skupiny a že sa navzájom vylučujú. To znamená, že ak aktivujete jedno tlačidlo, druhé sa deaktivuje. Ak sa názvy tlačidiel líšia, potom je možné aktivovať obe tlačidlá súčasne.
Takto môžete odovzdať hodnotu = výber jednej alebo druhej odpovede handlerovi.
Samotnú otázku doplníme po otvorení odseku. Opýtajme sa človeka, či rád šetrí čas?
Radi šetríte čas?
A ešte jedna vec, ktorá sa vám môže hodiť, je automatická aktivácia tlačidlá na začiatku. Na tento účel existuje špeciálny atribút, ktorý je možné pridať k požadovanému tlačidlu. Toto tlačidlo bude na začiatku povolené. Atribút sa volá skontrolované- možno preložiť ako označený. Tento atribút nemusí byť nastavený na žiadnu hodnotu.
Radi šetríte čas?
A tu je konečný výsledok.
Checkboxes – typ checkboxu
Alternatívou k prepínačom v HTML sú začiarkavacie políčka, iba v tomto prípade je možné vybrať niekoľko prvkov. Vytvorme napríklad nový odsek a spýtajme sa, aké nástroje na úsporu času najradšej používate?
Po otázke označíme nový odsek na vytvorenie rovnakých začiarkavacích políčok. Prvé zaškrtávacie políčko bude pre denník.
Ak skontrolujete náš kód v prehliadači, bude vyzerať takto:
Teraz rovnakým spôsobom vytvoríme ďalšie dve začiarkavacie políčka: meranie času a náš vlastný vývoj.
Aké nástroje na úsporu času používate?
Nezabudnite pomenovať každé začiarkavacie políčko svojím jedinečným názvom.
Ak súbor uložíte a skontrolujete, uvidíte nasledovné.