CSS overrides can change the default look of almost anything:
- You can use CSS to override what a checkbox or radio button looks like, but if you don’t, the checkbox will look like a default checkbox on your operating system and some would say that’s best for accessibility and usability.
- You can use CSS to override what a select menu looks like, but if you don’t, the select will look like a default select menu on your operating system and some would say that’s best for accessibility and usability.
- You can override what anchor links look like, but some would say they should be blue with underlines because that is the default and it’s best for accessibility and usability.
- You can override what scrollbars look like, but if you don’t, the scrollbars will look (and behave) the way default scrollbars do on your operating system, and some would say that’s best for accessibility and usability.
It just goes on and on…
- You can customize what a button looks like, but…
- You can customize what the cursor looks like, or particular elements on your site, but…
- You can change the text highlighting color, you can change the accent color, heck, soon you’ll be able to customize what spelling and grammer mistakes look like in editable text areas, but…
Where do you draw the line?
In my experience, everyone has a different line. Nearly everybody styles their buttons. Nearly everybody styles their links, but some might only customize the hue of blue and leave the underline, drawing the line at more elaborate changes. It’s fairly popular to style form elements like checkboxes, radio buttons, and selects, but some people draw the line before that.
Some people draw a line saying you should never change a default cursor, some push that line back to make the cursor into a pointer for created interactive elements, some push that line so far they are OK with custom images as cursors. Some people draw the line with scrollbars saying they should never be customized, while some people implement elaborate designs.
CSS is a language for changing the design of websites. Every ruleset you write likely changes the defaults of something. The lines are relatively fuzzy, but I’d say there is nothing in CSS that should be outright banned from use — it’s more about the styling choices you make. So when you do choose to style something, it remains usable and accessible. Heck, background-color can be terribly abused making for inaccessible and unusable areas of a site, but nobody raises pitchforks over that.
I’d be interested to know what prompted this post, who raised their pitchforks and over what?
It’s meant to be more of a general observation. I’ve seen pushback on all of this in the past.
For example, here’s Eric Bailey (I think he’s right here, for the record) about how you shouldn’t customize a cursor:
https://ericwbailey.design/writing/dont-use-custom-css-mouse-cursors/
Personally, I’ve gotten a TON of flack for customizing scrollbars.
I’ve seen plenty of pushback about customizing form elements over the years.
They definitely should! I think for new experience and in era of NFT and digital art, we should be able to customize styles of every pixel of browser’s window. At least it would be very fun!
Everything should be customizable.
UA devs are humans like us and they do stuff like everyone else (hello Firefox team, nice scrollbars u got there).
Therefore everything should be customizable
Unfortunately defaults aren’t always the best for accessibility and usability. One example can be the focus state, some browsers have poor contrast even if you use white background.
I agree with this. Additionally, if all of the browsers would just get together and make all of their defaults CONSISTENT, then maybe we would be a little less inclined to style some of these things.
Like, I don’t really care that much about having the most beautiful radio buttons and checkboxes, but if they could all look the same across browsers, then I wouldn’t need to tweak the way they look on some browsers and not others, for example. And yeah, don’t even get me started no focus states; they’re TERRIBLE for some browsers, you can barely even see them at all even when you’re specifically looking for them.
It also takes time to implement and maintenance.
Amen. A great power means a great responsibility. Customize following best practices of accessibility and usability and everything should be fine.
(Context: I refer to the subset of webpages that focus on text with some images)
My personal rule when changing defaults is to follow this hierarchy:
Accessibility
Mobile-Friendly
Personal preferences
There is some overlap between the first two elements. I try to put a limited budget on “personal preferences”, since I want users to be able to customize their browser defaults without breakages. Browsers let users alter the default stylesheets (esp. the colors and fonts), and I’d rather have my websites conform to these preferences than stand out (when possible).