How to style type="checkbox" cross-browser?

Question

css

Hello!

Please tell me how to make such a checkbox cross-browser:



I tried in different ways, googled, but something did not work out very well.

There is only 1 checkbox on the page, but it is very nasty, so I have been racking my brain for more than an hour! :))

I will be very grateful to you for your help! :)

Answer 1

Make a label for the checkbox, hide the checkbox itself, add the necessary styles for the label through :before. (when checkbox:checked and checkbox are in the normal state, but the order of the tags in the code is important). A similar method was described on habrahabr.
Pseudocode:

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

Will display an asterisk for a checked checkbox and a checkmark for an empty checkbox. You just have to replace it all with pictures. Clicking on them will also work, because. :before :)

Answer 2

It is strange, of course, that, according to you, Gogle has a day off today).
Here's a heading in the right direction for the label

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

there is a cool "for" attribute that binds the field to a label,
try customizing the label

Answer 3

Yes, they usually act in line with Defman21. A hidden checkbox and a div associated with it - and there you already shove whatever you want.