Diskuze: checkbox style

HTML a CSS HTML a CSS checkbox style American English version English version

Avatar
albertpatera
Redaktor
Avatar
albertpatera:

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
tomasmanhal
Člen
Avatar
Nahoru Odpovědět  +1 27.6.2015 14:51
Kdyby nám dodali k životu zdrojový kód, vše by bylo jednodušší...
Avatar
albertpatera
Redaktor
Avatar
 
Nahoru Odpovědět 27.6.2015 15:17
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na albertpatera
Honza Bittner:

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  +2 27.6.2015 18:03
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
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.