DEV Community

loading...

Discussion on: Styling HTML Checkboxes Is Super Easy

Collapse
reflectingwalls profile image
reflectingwalls

Hello! This works great, except the checkmark unicode is not showing up no matter what I do. Can you help?

Collapse
proticm profile image
Milos Protic Author

Hi, what browser are you using? Does the fiddle work for you, or the checkmark is not showing there as well?

Collapse
stephanietuerk profile image
Stephanie Tuerk

FYI the problem here is that the checkmark is position: absolute. Works in your JSFiddle because the box itself is in the top left corner of the window. Becomes a problem if your button is elsewhere on the page.

But thank you so much for throwing this together!!! Super useful.

Thread Thread
proticm profile image
Milos Protic Author

Thanks, glad you find it useful :)

I've just tried to change the position and and added margin-top: 150px; margin-left: 150px to the .checkbox class and it worked fine. I tried it in chrome.

Becomes a problem if your button is elsewhere on the page.

Did you move it in any other way?

The position:absolute should not be a problem because we have relative positioning on the parent.