DEV Community

loading...
Cover image for Pure CSS checkboxes with one element

Pure CSS checkboxes with one element

Posandu
I'm Posandu πŸ‘‹ Contact me at posandu[@]tronic247.com. Visit my website https://www.tronic247.com/
Originally published at tronic247.com ・1 min read

Here is a Pure CSS checkbox with only one element. It’s also accessibility friendly.

HTML

<input type="checkbox" data-name="Item 3" class="checkbox">
Enter fullscreen mode Exit fullscreen mode

The CSS

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");

.checkbox {
    appearance: none;
    height: 100px;
    width: 100px;
    background-image: radial-gradient(circle farthest-corner at 10% 20%, rgba(37, 145, 251, 0.98) 0.1%, rgba(0, 7, 128, 1) 99.8%);
    background-size: 360% 100%;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.checkbox:after {
    content: attr(data-name);
    top: 50%;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    font-family: "Inter", sans-serif;
    color: #3f3f3f;
    z-index: 99;
    transition: all 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.checkbox:before {
    content: "";
    position: absolute;
    top: 0%;
    left: 0px;
    height: 200%;
    width: 200%;
    background: #e9e9e9;
    z-index: 0;
    transition: all 0.2s linear;
    transform: scale(0.6) translate(-50%, -50%);
}
.checkbox:hover:before,
.checkbox:focus-visible:before {
    background: #cacaca;
    top: -4%;
    left: 20%;
}
.checkbox:checked:before {
    opacity: 0;
    transform: scale(0.9);
}
.checkbox:checked:after {
    color: white;
}
.checkbox:checked {
    box-shadow: 0px 4px 10px -6px black;
}

.checkbox:focus-visible {
    outline: none;
    box-shadow: 0px 0px 0px 5px #480f5d;
}
Enter fullscreen mode Exit fullscreen mode

Result

Discussion (21)

Collapse
afif profile image
Temani Afif

It’s also accessibility friendly --> it's not you that decide about that πŸ˜›. I will summon @inhuofficial that will give you some rant πŸ˜†

Collapse
inhuofficial profile image
InHuOfficial • Edited

Why do I always have to be the bad guy?

Sorry @posandu at 13 years old you are doing amazing, Temani was mean summoning me!

However I won't "pull my punches" due to your age, none of these are criticisms of your work, just things you may not know to look for yet πŸ˜‹

So here a few things that mean this isn't fully accessible (yet):-

  1. Using colour alone to indicate check state is not enough, you need to account for people who have colour blindness (with that being said I think the difference between the two states would be significant enough but it is still a good practice).
  2. For people with a cognitive impairment it may not be evident that blue means checked. I would suggest adding an icon that changes depending on state or some other method that makes sense (as when all of them are unchecked there is no point of reference for state)
  3. On iphone you get a gigantic tick mark that interferes with the legibility of text (but ironically would work for fixing the above issue). I think this is because you didn't prefix appearance: none for iPhone as I believe it should work when prefixed. (try prefixing it -> -webkit-appearance: none and see if that fixes it)
  4. You need a <label> for your checkbox that is properly associated (preferably with for="idOfCheckBox" as it is more robust than wrapping the input in the <label>) so that people who use assistive tech know what the control is for. The content attribute is not picked up by most screen readers.
  5. In the "unchecked" state there is not sufficient contrast with the background, it needs to be a minimum of 3:1 (add a border maybe?)
  6. Not a fail on WCAG as the animation is short but I would suggest adding prefers-reduced-motion media queries to turn off animations for people who request it, generally people with vestibular orders, anxiety disorders etc. as animation can be unsettling or distracting.
  7. Your text doesn't scale with font size changes. Use rem and em units for font sizes so if a user sets their browser size to large the font scales according.
  8. Your text needs to be larger or you need to darken the blue. At the moment the contrast is only 3.2:1 and the text does not qualify as "large text". It would need to be bold and 18px equivalent (about 1.1rem) or normal weight and 24px equivalent (1.5rem) at the current contrast levels.

That is all I can spot for now! If you need any help understanding any of those points or how to solve any of them just let me know.

And although that looks like a lot of things, most of them are quick fixes and other than the lack of a label this is better than most examples I have seen!

A lot of examples aren't usable with a keyboard whereas yours is so, great job!

For checking colour contrast you can use the WebAim colour contrast checker

Collapse
afif profile image
Temani Afif

and the community have a lost a young developer ...

🀣

Thread Thread
inhuofficial profile image
InHuOfficial

Baptism of fire, if they manage to implement all of those things they are already better than most senior devs and will be a mega star developer!

Thread Thread
afif profile image
Temani Afif

they are already better than most senior devs --> hmm, why I have a strange feeling that I am concerned by this πŸ€”πŸ€”
XX: no, no your are not, keep calm ... Xanti is on vacation now ...

Thread Thread
inhuofficial profile image
InHuOfficial

🀣 for once it was an innocent comment, I am not always mean you know!

Thread Thread
posandu profile image
Posandu Author • Edited

Thank you so much @afif and @inhuofficial . (For the tips and etc)

Collapse
posandu profile image
Posandu Author • Edited

Thank you very much @inhuofficial I will update this post for your accessibility guidelines.

Collapse
posandu profile image
Posandu Author

πŸ˜…

Collapse
afif profile image
Temani Afif

by the way, you can use codepen to embed to your work here.

Collapse
posandu profile image
Posandu Author

@afif I'll create a codepen and embed it here.

Collapse
martinromario55 profile image
Martin Romario Ntuwa

You can use codePen to embed the result. You should see what other people are doing with their blogs. Telling people to visit your site is like click bait. I visited your site and the checkboxes are nice, but they're larger than expected. Remember that their main purpose is to send data to the back-end,

Collapse
posandu profile image
Posandu Author

I'm sorry to hear that. What do you mean larger than expected ?

Collapse
itscasey profile image
Casey πŸ’Ž

This is awesome Posandu!

I'd have loved it even more if the background filled in from the bottom - great work

Collapse
posandu profile image
Posandu Author • Edited

Thank you !! I will update it πŸ˜‰

Collapse
itscasey profile image
Casey πŸ’Ž

It looks great!

Thread Thread
posandu profile image
Posandu Author

Thank you !

Collapse
joelbonetr profile image
JoelBonetR

such an original way to implement a Switch UI component! great job

Collapse
posandu profile image
Posandu Author

Thank you !

Collapse
manuthecoder profile image
Manu

Very nicely designed checkboxes!!

Tab-friendly too!

Collapse
posandu profile image
Posandu Author

Thank you ❀