Стилизация чекбокса без label

[WhatIsHTML]

Привет всем. В интернете есть полно статей о том, как стилизовать чекбокс, но я не могу использовать атрибут for для привязки label и чекбокса, т.к. у меня label является внешним по отношению к чекбоксу и такую струтктуру желательно не нарушать. Есть ли метод стилизации чекбокса без применения <label for=''> ? 

К примеру у меня сейчас проблема с тем, как спрятать стандартній чекбокс и оставить только синий кружочек для input:checked

https://jsfiddle.net/k4nq7paL/

[andrey7287]

.product input {
  width: 0px;
  height: 0px;
  }

 

[WhatIsHTML]

спасибо, решение такое простое, что аж стыдно

[Switch74]

Не знаю как сейчас, но раньше в каком-то браузере нельзя было сделать чекбокс меньше определенного размера, я бы спрятал его в контейнере с width:0;height:0;overflow:hidden;

[WhatIsHTML]

1 час назад, Switch74 сказал:

Не знаю как сейчас, но раньше в каком-то браузере нельзя было сделать чекбокс меньше определенного размера, я бы спрятал его в контейнере с width:0;height:0;overflow:hidden;

тогда и стилизация исчезнет, ведь она задана в input::after

[Switch74]

так задавайте ее для контейнера в котором лежит input

[SelenIT]

В 30.08.2016 в 00:39, WhatIsHTML сказал:

ведь она задана в input::after

А в каких браузерах это работает? Вебкитята?

[klierik]

https://jsfiddle.net/klierik/2uavba29/

Safari/OSX — работает

[SelenIT]

А в Фоксе (даже ночном) дефолтный инпут. Ну, в принципе, за прогрессивное улучшение покатит...

[klierik]

Судя по всему пока что только webkit. Посмотрим через пол годика...