Как кроссбраузерно стилизовать type="checkbox"?

Question

[GoodProject]

Здравствуйте!

Пожалуйста, подскажите как кроссбраузерно сделать такой чекбокс:



Пробовал разными способами, гуглил, но что то не очень получилось.

На странице всего 1 чекбокс, но он очень противный, поэтому ломаю голову уже не первый час! :))

Буду Вам очень благодарен за помощь! :)

Comments

[Oneng Lar]

Это зависит от html кода, можете показать?

[GoodProject]

Oneng Lar: обертка ввиде блока, внутри инпут и после него лейбл

[Oneng Lar]

GoodProject: значит то что написал Defman21

Answer 1

[Defman21]

Делаете label для чекбокса, сам чекбокс скрываете, для label через :before добавляете нужные стили. (когда checkbox:checked и checkbox в обычном состоянии, но важен порядок тегов в коде). На хабрахабре описывался подобный способ.
Псевдокод:

<input type="checkbox" id="checkbox"><label for="checkbox">Test</label>
<style>
    #checkbox {
        display: none;
    }
    
    #checkbox:checked + label:before {
        content: "* ";
    }
    
    #checkbox + label:before {
        content: " ";
    }
</style>

Будет отображать звездочку для отмеченного чекбокса и галочку для пустого чекбокса. Тебе остается просто заменить это все на картинки. Клик по ним тоже будет работать, т.к. :before :)

Comments

[GoodProject]

протестирую отпишусь спс

[GoodProject]

спасибо, помогло!

Answer 2

[Иван Кондратьев]

Странно конечно что по Вашим словам у гогла сегодня выходной ).
Вот курс на правильное направление у label

<labe for="test">Test</label>
<input type="чекбокс" id="test">

есть классный атрибут "for" он привязывает поле к лейблу,
Попробуйте кастомизировать лейбл

Answer 3

[Виктор]

Да, обычно действуют в русле, указанном Defman21. Скрытый чекбокс и связанный с ним div - а туда уже пихаете все, что хотите.