So, styling a checkbox with CSS is still a pain, huh? The default styles are fine, then. 🤷‍♂️ stackoverflow.com/a/27779075

I would really love to be able to tell the browser something like "make the checkbox look exactly the same, just change this one color," but nope. Looks like checkboxes and radio buttons are just not there yet.

Follow

@nolan Yeah, hopefully we can just manipulate its shadow dom in the future, but WebKit’s not too keen on that so yay!

@dustin
Tbh this is where I would draw the line too. If a browser implements something like a Mac OSX Checkbox I'm not going to recognise it as such as I use Linux 99% of the time. Some design choices as additional cognitive load, and I'm kinda happy that it's hard to do so.
@nolan

@iMartyn @nolan I agree. However, there are valid reasons to want to extend built-in elements. Most common is <button>, especially for creating things like toolbars. With a wrapper web component class one can recreate a checkbox in shadow dom and hiding the real one visually all while retaining built-in accessibility features by passing events to the real one. We can do it already, so might as well just make it more efficient.

@dustin
But accessibility doesn't end with screen readers and magnifiers, it extends to cognitive load. Like my example, some designer will decide that a checkbox looks nice with a dashed box instead of solid, or just a grey box with no border. This increases cognitive load for people understanding what that grey box is. Add to that if they've overridden their background colour to grey for readability reasons, you now have nothing because "style".
@nolan

@iMartyn @nolan I agree, but it’s already possible to do this both on the web and natively. You see it all over in mobile applications. Terrible designers and developers already waste ridiculous amounts of code on replacing native elements for superficial reasons, and I’ve spent my career yelling at them for it. However, there are valid reasons to allow extending native elements, and throwing that out because someone might replace a checkbox with a chicken is stupid, frankly.

@dustin
I think I'll agree to disagree on this one, I'm fine with it being difficult to do this, because almost every time web devs modify a built in, standard object like this, it's for all the wrong reasons, and being able to say to the "designer" it's too difficult to change that is a good thing in my view, as a user of the web.
@nolan

@iMartyn @nolan The problem is that it isn’t difficult as the work is already done, just inefficient. But yeah. There’s probably about 7 years of discussion on this in mailing lists and on w3c’s github that’s interesting. It’s shocking we have web components at all, frankly.

Sign in to participate in the conversation
Mastodon

Ook!