12
Custom Round Checkbox (codepen.io)
almost 6 years ago from Matt Smith, Web Developer
13 comments
Alec Lomas, almost 6 years ago
This looks great! But, it feels like it goes against web conventions imo. Checkboxes are square, and radio buttons are round. If I see this, I'm going to assume it's a radio button.
Thomas Green, almost 6 years ago
So what happens when you need a label?
Matt Smith, almost 6 years ago
You could add one using a pseudo class, e.g.,
.round label:before { content: "This is a the label"; }. Position it as you like.Hamish Taplin, almost 6 years ago
That's not accessible at all :(
Thomas Michael Semmler, almost 6 years ago
there are some other techniques for that that don't require a label element. You can always work with a selector like
.checkbox:checked + .anything.If you don't have a label element, it's not accessible.
let me rephrase it:
You can use a different element instead of the label element for the visual part of the checkbox, or radio button or whatever. If you position your checkbox right above the new visual checkbox, and you just set the opacity to 0, it can still be clicked, so you don't have to use the label element to trigger the clicking, and you are free to use the label element as it is supposed to be used.
https://codepen.io/thefairystamp/pen/EXgQdN
Sorry, I just assumed this is regular knowledge.
Simon Evans, almost 6 years ago
Nice! I pinched it and made a few variations.
stephen f, almost 6 years ago
It's a nice button an all, but styling a label and repurposing it in this manner is not my bag at all... labels should be labels.
Here's an option I've been working on using Material Icons: https://codepen.io/tg/pen/RgRVNx?editors=1100
Not a round checkbox but you can use whichever icon you like.
I am keen to find a accessible approach which can be easily resized and colours can be changed. I'll fork this and try the same approach using SVG instead of an icon font.
Regarding http://wtfforms.com/ it seems the input must be wrapped in a label, that approach feels a little weird. However, using svg as a background image seems cool.
Any feedback appreciated.
Luca Candela, almost 6 years ago Bad idea to have round checkboxes. Radio buttons are round and checkboxes are square-ish. Don't make me think!
John P, almost 6 years ago
Looks like a radio button
Login to Comment
You'll need to log in before you can leave a comment.
LoginRegister Today
New accounts can leave comments immediately, and gain full permissions after one week.
Register now