checkbox - użyć javascriptu?

pytanie zadane 24 kwietnia 2016 w HTML i CSS przez BlvckFox Gaduła (4,240 p.)

Witam, tutaj podaje kod: https://codepen.io/FoxCode/pen/NNBmVa
Czy można by było zrobić takie checkboxy przy użyciu tylko i wyłącznie CSS'a? (bez JS) Może z użyciem pseudoklas, czy coś, jak ktoś wie jak to można by było zrobić niech podlinkuje kod podobny.

2 odpowiedzi

odpowiedź 24 kwietnia 2016 przez Comandeer Guru (601,590 p.)
wybrane 24 kwietnia 2016 przez BlvckFox

Najlepsza

http://www.thecssninja.com/css/custom-inputs-using-css → wystarczy zastosować tę technikę

komentarz 24 kwietnia 2016 przez BlvckFox Gaduła (4,240 p.)

Dokładniej chodzi o to, żeby checkbox mial width i height tak jak w kodzie a w środku niego był napis.

1	komentarz 24 kwietnia 2016 przez Comandeer Guru (601,590 p.) Nom… Technika jest podobna. Trzeba użyć ::before w połączeniu z input:checked + label.

komentarz 24 kwietnia 2016 przez BlvckFox Gaduła (4,240 p.)

Mógłbyś napisać przykładowych pare linijek? Nie wiem jak się za to zabrać, nigdy nie używalem selektora +

komentarz 24 kwietnia 2016 przez Comandeer Guru (601,590 p.)

http://codepen.io/Comandeer/pen/yOqWEr

Serio, to nie jest trudne, wystarczy trochę poszukać w Sieci i mieć podstawową wiedzę o CSS a nie czekać na gotowca…

komentarz 24 kwietnia 2016 przez skav3n Gaduła (3,900 p.)

Z tego co mi się wydaje, to display: none dla inputa jest niewskazane, ponieważ ten checkbox nie będzie się np. walidować.
Lepiej zrobić tak:

<input type="checkbox" name="box" id="box"/>
<label for="box"></label>

input[type="checkbox"] {
    opacity: 0;
    position: absolute;
    left: 999;
}
input[type="checkbox"] + label:before {
    content: 'blablabla';
    color: black;
}
input[type="checkbox"]:checked + label:before {
    content: 'ehhhhhhh';
    color: blue;
}

komentarz 24 kwietnia 2016 przez Comandeer Guru (601,590 p.)

Walidować się będzie, na co wskazuje to, że działa pseudoklasa :checked. Jedyną rzeczą, jaka może nie zadziałać w takiej konfiguracji, jest odczytanie tego pola w czytniku ekranowy. Ale do tego lepiej zastosować już istniejącą klasę .visuallyhidden niż pozycjonować tekst poza ekran. Uaktualniłem pena.