Stylizacja checkboxów na chrome i firefox - złe wyświetlanie

Question

Dlaczego to działa na chrome a na firefox nic?:/

Mam dwa inputy dlatego nth-of-type 1. Inputy są bez klasy i ID.

Walczyłem z after/before ale bez żadnych efektów. 

jakaśścieżka label:nth-of-type(1) input {
    content: url("jakieś zdjęcie");
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 50px;
}

 

Answer 1

Najlepiej byłoby ukryć checkboxa i podstawić zamiast niego ostylowany label.

Comments

Sęk w tym że samo działanie checkboxa musi być zachowane, tzn jest ikonka czarna a po kliknięciu (zatwierdzeniu checkboxa) zmienia się na czerwoną. Nie łapię dlaczego to nie działa na Firefox, skoro na chrome lata bez problemu :(

---

No to będzie zachowane.

---

okej, stylizuje label tylko niestety mam problem ze złapaniem go po check. Jakieś pomysły? Dziś już potworzyłem takie kombo że głowa mała a firefox nadal nic :D

label:nth-of-type(1)::before{
tutaj na firefox style działają
}

Jak dobrać się do label:nth-of-type(1) tylko po kliknięciu (checkbox).

---

input:nth-of-type(1):checked + label::before?

---

Chyba w tym przypadku muszę się przytulić do JavaScriptu.

Myślę coś w tylu

getElementsByTagName

... i jakoś zaciągnąć label:nth-of-type(1) potem label:nth-of-type(2) - niestety nie wiem czy da się tak zrobić  .Następnie robię pentle for i warunek IF jeśli któryś z label jest checked to dodajemy CSS.

Koncepcja dobra ?

 

Znalazłem taki oto przykład, teraz pytanie jak się dobrać nie do konkretnego elementu z ID tylko bezpośrednio do inputa ?

https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_node_childnodes2

 

---

Tylko po co skoro to samo można osiągnąć CSS-em? Wystarczy lekko zmodyfikować strukturę HTML-a.