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">
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;
}
Result
Top comments (21)
It’s also accessibility friendly --> it's not you that decide about that 😛. I will summon @inhuofficial that will give you some rant 😆
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):-
appearance: none
for iPhone as I believe it should work when prefixed. (try prefixing it ->-webkit-appearance: none
and see if that fixes it)<label>
for your checkbox that is properly associated (preferably withfor="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. Thecontent
attribute is not picked up by most screen readers.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.rem
andem
units for font sizes so if a user sets their browser size to large the font scales according.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
and the community have a lost a young developer ...
🤣
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!
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 ...
🤣 for once it was an innocent comment, I am not always mean you know!
Thank you so much @afif and @inhuofficial . (For the tips and etc)
Thank you very much @inhuofficial I will update this post for your accessibility guidelines.
😅
by the way, you can use codepen to embed to your work here.
@afif I'll create a codepen and embed it here.
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,
I'm sorry to hear that. What do you mean larger than expected ?
This is awesome Posandu!
I'd have loved it even more if the background filled in from the bottom - great work
Thank you !! I will update it 😉
It looks great!
Thank you !
Very nicely designed checkboxes!!
Tab-friendly too!
Thank you ❤
such an original way to implement a Switch UI component! great job
Thank you !