Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

CSS checkbox examples

getcssscan.com

Post reply on HN
Print view View original

51–60 of 64 posts

Re: CSS checkbox examples

#51

Post by bastawhiz »

I'd like to remind folks that switches and checkboxes mean two different things. Please do not use them interchangeably on the web.

Switches imply that changing the value has an immediate effect (i.e., the change is immediately saved). Checkboxes do not, and should have a corresponding Save button.

Switches were popularized by iOS, where they almost always have immediate effect. Checkboxes have been around much longer on the web, and have almost never had immediate effect (hell, it wasn't even possible until Web 2.0).

Re: CSS checkbox examples

#52

Post by mrtksn »

spaceman_2020 wrote: post #44

Looking at some of the skeuomorphic designs, I can't help but feel that this design style went out of vogue way too soon. It looks so...juicy.

It shows some signs of comeback. The problem with the last skeuomorphic design trend was that it wasn't "honest", for example leather elements didn't behave like leather and the illusion quickly fell apart making it tacky. With the current performance of the devices we can have much more convincing materials and object designs. Apple's blurry glass design on iOS and macOS is very nice for example, it blends the background very nicely and the way the colors bleed you can tell. that this is not simply a blur effect.

Re: CSS checkbox examples

#53

Post by franciscop »

CipherThrowaway wrote: post #46
franciscop wrote: post #34

Earlier quoted context omitted.

This seems more like a gallery of art/starting point than a "use this as-is", so I'm sad to see this comment on the top of HN since as a show of what can be accomplished with checkboxes it's amazing. We front-end devs would benefit from a lot more works of art like this, and then people trying to implement them into real systems would need to make them accessible. Similar to how we benefit greatly from Dribbble. If w…

I agree with the sentiment but there are problems besides accessibility here: 1. Crosses and squares being used instead of check marks. 2. Circles being used as containers instead of boxes. 3. Toggle switches being presented as checkboxes. Maybe 5-10 of these are good inspiration for checkboxes.

I am so sad anyone can look at this amazing resource and with a straight face say that only 10% of it is valid as an inspiration. It's a magnificent source of inspiration! Sure some are not perfect, but that doesn't detract from the overall goal.

Re: CSS checkbox examples

#54

Post by miiiiiike »

dmitriid wrote: post #30
lol768 wrote: post #29

Earlier quoted context omitted.

Tailwind UI's checkboxes ( https://tailwindui.com/components/application-ui/forms/check... ) are fine, accessibility-wise. They can be tabbed to using the keyboard, they are proper elements in the DOM, they can be activated using the space key, they can be activated by clicking on their label.

Tailwind is one of the vanishingly few css frameworks/css utility collections/css design systems that is really, really good about keeping semantic meaning of things and accessibilty intact, and whose examples show how to implement them correctly. Almost everyone else is "screw this, we're going to use links as buttons and divs as lists".

What framework uses divs as lists without accessibility hints? I can't think of, or find, a major one that does.

Re: CSS checkbox examples

#55

Post by miiiiiike »

CipherThrowaway wrote: post #46
franciscop wrote: post #34

Earlier quoted context omitted.

This seems more like a gallery of art/starting point than a "use this as-is", so I'm sad to see this comment on the top of HN since as a show of what can be accomplished with checkboxes it's amazing. We front-end devs would benefit from a lot more works of art like this, and then people trying to implement them into real systems would need to make them accessible. Similar to how we benefit greatly from Dribbble. If w…

I agree with the sentiment but there are problems besides accessibility here: 1. Crosses and squares being used instead of check marks. 2. Circles being used as containers instead of boxes. 3. Toggle switches being presented as checkboxes. Maybe 5-10 of these are good inspiration for checkboxes.

They're fine.

In other news:

Nuclear power plant steering group improves reactor proposal! Committee stalls debating shade of yellow to be used for lines in parking lot.

Re: CSS checkbox examples

#56

Post by addandsubtract »

dmitriid wrote: post #30
lol768 wrote: post #29

Earlier quoted context omitted.

Tailwind UI's checkboxes ( https://tailwindui.com/components/application-ui/forms/check... ) are fine, accessibility-wise. They can be tabbed to using the keyboard, they are proper elements in the DOM, they can be activated using the space key, they can be activated by clicking on their label.

Tailwind is one of the vanishingly few css frameworks/css utility collections/css design systems that is really, really good about keeping semantic meaning of things and accessibilty intact, and whose examples show how to implement them correctly. Almost everyone else is "screw this, we're going to use links as buttons and divs as lists".

Bootstrap has been pushing accessibility since v4, I believe.

Re: CSS checkbox examples

#57

Post by frosted-flakes »

mrtksn wrote: post #52
spaceman_2020 wrote: post #44

Looking at some of the skeuomorphic designs, I can't help but feel that this design style went out of vogue way too soon. It looks so...juicy.

It shows some signs of comeback. The problem with the last skeuomorphic design trend was that it wasn't "honest", for example leather elements didn't behave like leather and the illusion quickly fell apart making it tacky. With the current performance of the devices we can have much more convincing materials and object designs. Apple's blurry glass design on iOS and macOS is very nice for example, it blends the backg…

Windows 7's Aero effects were pretty honest, in my opinion.

Re: CSS checkbox examples

#58

Post by dmitriid »

miiiiiike wrote: post #54
dmitriid wrote: post #30

Earlier quoted context omitted.

Tailwind is one of the vanishingly few css frameworks/css utility collections/css design systems that is really, really good about keeping semantic meaning of things and accessibilty intact, and whose examples show how to implement them correctly. Almost everyone else is "screw this, we're going to use links as buttons and divs as lists".

What framework uses divs as lists without accessibility hints? I can't think of, or find, a major one that does.

You will not believe this, but it's called Semantic UI: https://semantic-ui.com/elements/list.html

Re: CSS checkbox examples

#59

Post by dmitriid »

mpeg wrote: post #48
rudasn wrote: post #45

Earlier quoted context omitted.

Looks like it needs javascript though. Doesn't work for me on chrome mobile without JS.

Javascript is actually great for accessibility, it’s really hard to properly implement WAI-ARIA without it. Most people with screen readers will have js enabled too.

The main reason I can think of is trapping input inside a modal dialog when it's required.

Browsers recently rushed the dialog element and still have no easy solution for this.

Re: CSS checkbox examples

#60

Post by andrei_says_ »

FrontAid wrote: post #13

Unfortunately, almost all of them are terrible for accessibility. Most of them cannot be focussed by keyboard. And even more do not have a focus styling. I did not check their code, but that alone does not make a good impression. Please consider accessibility when you have the urge to build custom (form) components. For checkboxes, have a look at https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/ for some guidelines.

How amazing it would be if we could style checkboxes using CSS and not have to replace them with images.
Post reply on HN