Por: Kavindu Santhusa

Websites have checkboxes in forms to get the choice of users.

The defines a checkbox.

The checkbox is shown as a square box that is ticked (checked) when activated(checked).

Checkboxes are used to let a user select one or more options of a limited number of choices.

Tip: Always add the tag for best accessibility practices!

Can you style it with css?

You can change width and height only.

How can we add more styles to checkbox?

Solution
I have wasted many hours with this question. I found one solution.

💡 - Hide checkbox, make a dummy and pass events to hidden checkbox.

Bad, You should create extra elements(3 or 2). And you can't use inline styles if you are using 2 extra elements.

💡 - remove default styles.

Use appearence property to remove default styles. 95%+ browsers supported. In unsupported browsers checkbox has same with and height without other styles. So, It's a fallback.

But, It has no action when checked.
💡 - Background color change(like Sourceforge)
💡 - Change border to ✓ mark(like materialize.css default)
💡 - ✓ mark as Background Image(like Bootstrap 5)
💡 - Use unicode ✓ mark(need javascript)

See https://moonhare.hashnode.dev/style-html-checkboxes-with-css for more...

1 episodios disponibles