Question

I’m looking for the best/efficient way to get identical form elements across all browsers on PC and Mac. This sounds like a pretty fundamental question that I should know the answer to but funnily enough I can’t figure it out.

I’ve been styling forms with CSS and the occasional bit of JQuery for a while now and I’ve never worried about the subtle differences across browsers/computers.

But now I’m on a project where they literally have to be identical. Any ideas?

Answer 1

You can’t. Components of complex form controls are a part of what’s called shadow DOM: we can see that the element is made up of smaller components, but we can’t style them.

Simpler elements like buttons or texty (text, password, search, url, email, tel) input fields can generally be styled to look consistently across browsers (provided the styling you are using is supported by said browser).

Pretty much everything else looks odd if you try to style it. The worst offenders are select and complex inputs (file, date, datetime, time, color, range, number, etc.) because they’re made up of multiple elements (eg. input field and a button or two). Unless the browser grants you the ability to style those components through special CSS properties (I’m certain I’ve seen a few under the webkit prefix, but couldn’t tell you which ones), you can’t touch them.

You have 3 options here:

• Don’t style form controls in any way that will cause it to drop the browser’s default styling (so that simple and complex controls continue to look similar to each other)
• Don’t use complex form controls at all (ie. no file, select, etc.)
• Replace all of the complex form controls with simple ones via JavaScript