Modern UI custom checkbox. Feedback
I have made a custom checkbox using vanilla css. Want to know how practical and useful it can be. https://codepen.io/senra/pen/dyQeqjV
8 Replies
Hiya, first of all, this is a really useful skill to have. You are using the correct HTML to flesh out this element. Right now there are a couple of pointers:
The first and most important one is that you've now removed accessibility features from the original checkbox. I can still use the
tab key to tab into the checkboxes, but there are no visual cues anymore. So it should really have some focus-visible styles.
Also be careful hiding the input element with the current CSS. It might make it so screen-readers completely skip over the checkbox.
Here's a snippet of code you can use to hide any element you want from sighted users without hiding it from screen-readers:
Secondly these visually look like radio buttons, or a radio group. Yet their behaviour is that of a checkbox.
Thirdly, there are parts inside the bordered checkbox element that are not clickable to check the checkbox. This feels confusing to use, as the whole unit kind of looks like one big button. Maybe have a look into that.
Lastly, I think you can do without the <span class="checkmark"> and use pseudo elements instead. It makes your code easier to read and use by others. If they forget or accidentally remove the checkmark span, it doesn't work properly anymore.
Hopefully these tips help you out.Oh I see. Thank you for the valueable feedback. I just have to remove the div and add the div styling to the labels. Ill also try the rest of the suggestions.
@senrastalker If you have trouble figuring this out, feel free to reach out.
Yeah I took way longer than I might admit trying to fix it😅 . The issue I am running into, is that I am able to apply the styling to thee
::after element, but then hiding the input becomes a problem. I am not getting how to seperate the ::after from the parentSame link?
yes
I see
this is a better implementation
you have used grid to place the checkbox and label
also you have used the psuedo elements for the label, and not the input element. I did not think of that 😅