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í.
Pouze tento týden sleva až 80 % na e-learning týkající se C a C++. Zároveň využij akce až 80 % zdarma při nákupu e-learningu - více informací.
c week
Avatar
albertpatera
Redaktor
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
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
albertpatera
Redaktor
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
Redaktor
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
Student FIT ČVUT :-) 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.