IT rekvalifikace s garancí práce. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Diskuze: checkbox style

Aktivity
Avatar
albertpatera
Tvůrce
Avatar
albertpatera:27.6.2015 14:15

Ahoj,

mám takovej dotaz. Jak nastylovat checkbox aby poté, co na něj kliknu, tak by tam nebylo klasický zaškrtávátko, ale tečka? Tady je kód :

echo "<div class='title'>";

     echo "<div>";

             $form =  "<form class='formoid-solid-blue' action='index.php' method='POST'>
             <h2 class='blurBg-false'>Electronic-Death</h2>
             Nick<input type='text' name='username' placeholder='Nick ve hře'><br>
             Email: <input type='email' name='email' placeholder='Tvůj email'><br>
             <p class='formoid-solid-blue'>Umíš střílet s Hunterem?</p><br>
               <input type='checkbox' class='big-checkbox' style='margin:auto' name='hunter' value='Ano'><span>Ano</span>
             <input type='checkbox' name='hunter' style='margin:auto' value='Ne'><span>Ne</span>
             <p class='formoid-solid-blue'>Umíš střílet se Sawn_offem?<p/><br>
               <input type='checkbox' name='sawn_off' style='margin:auto' value='Ano'><span>Ano</span>
               <input type='checkbox' name='sawn_off' style='margin:auto' value='Ne' ><span>Ne</span>
             <p class='formoid-solid-blue'>Umíš střílet s Uzzi?</p><br>
             <input type='checkbox' name='uzzi' style='margin:auto; background-color:blue; border-radius:50px;' value='Ano'><span>Ano</span>
               <input type='checkbox' name='uzzi' style='margin:auto' value='Ne'><span>Ne</span><br>
                 <input type='submit' value='Odeslat' name='submit'><br>";

CSS

input[type=checkbox]:checked + label:before {
        content: "\2713";
        text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
        font-size: 15px;
        color: #f3f3f3;
        text-align: center;
    line-height: 15px;
    border-radius:30px;
    background-color:#0073f7;
}

díky

neexistuje na to nějaká CSS vlastnost?

Editováno 27.6.2015 14:16
 
Odpovědět
27.6.2015 14:15
Avatar
Tomáš Maňhal
Člen
Avatar
Odpovídá na albertpatera
Tomáš Maňhal:27.6.2015 14:51

http://cssdeck.com/…ckbox-styles

 
Nahoru Odpovědět
27.6.2015 14:51
Avatar
albertpatera
Tvůrce
Avatar
Odpovídá na Tomáš Maňhal
albertpatera:27.6.2015 15:17

díky, vyzkouším to

 
Nahoru Odpovědět
27.6.2015 15:17
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na albertpatera
Honza Bittner:27.6.2015 18:03

Checkboxy a další formulářové blbosti se většinou stylovat moc, pokud vůbec, nedají. Naštěstí se vše dá propojit s labely (labelův for na checkbox id), takže můžeš stylovat je.

Jednotlivé form. komponenty vždy skryješ (tedy např. ten chceckbox).

Label poté pomocí checkbox + label (případně nějaké modifikace) selektneš a můžeš využít i ::before a ::after. Tedy máš jednoduše k dispozici 3 "hřiště", kde můžeš blbnout.

Akceptované řešení
+5 Zkušeností
Řešení problému
Nahoru Odpovědět
27.6.2015 18:03
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 4 zpráv z 4.