Browser defaults are generally rather sensible and malleable, but there are a few things I strongly urge you not to mess with.
Chrome, Firefox, Safari, Opera – all of these browsers have their own way of rendering HTML elements. From margins to padding to font-sizes, they determine how a page will render without CSS telling it what to do. Though each might do it differently, all browsers employ some styling for native UI components.

Ubiquity

Though each vendor slightly differs in default stylings, there are a few ubiquitous native UI components that stick around – not just in browsers, but in desktop and application environments, too. A good example of what I’m talking about is the focus ring on input fields, especially those that are text based.

For Reasons

Not only do focus rings appear in web browsers, but in a lot of applications, too. Keyboard users depend on them to determine where they are on the page. Mobile users also find the focus rings helpful when navigating forms. Knowing which of the multiple input boxes is the selected one makes sure they know what to enter on their keyboard. And before you say ‘but they clicked it, they should know’, most mobile browsers have a ‘next’ button that works just like ‘tab’ on a keyboard. People with vision impairment also utilize the focus ring to help them navigate the page.

It’s important to keep some of these native UI components around in your website/app/tool/thing because users may be lost without them. Restyling is OK, but removing is a big step to take to inconvenience your users.

…if an alternative focusing style isn’t made available, the page will be significantly less usable for people who primarily navigate pages using a keyboard, or those with reduced vision who use focus outlines to help them navigate the page. 

HTML Living Standard, section 6.4.6

The HTML Living Standard really has a lot to say about the focus property. And that’s just one property. There are dozens (if not more) of more ubiquitous default styles out there. Sara Cope compiled a great list of CSS properties that are a part of native UI components (there are a lot more than 12).

Restyling

Restyling defaults is a different story. I understand that the mediocre grays that Chrome and Firefox offer may not match your color palette, and that’s fine, go ahead and restyle. In fact, I encourage it. But please, don’t remove native UI components.

I like to write after reading some stuff: TJ VanToll wrote a great article on the focus outline.
Baymard Institute wrote an interesting article on restyling Native UI components.
The Government dabbles in writing about UI Design Basics.

No Comments...yet