Normalize.css: Form elements unified styles

[PerseusTheGreat]

Hi.
Would you please provide some default styles to reset forms elements?
Some elements have different width, height, padding, margin, border, outline, and alignment in different browsers.

This picture shows results of applying Normalize.css 5.0 on test.html 1.1.3 in some famous browsers (tested on Windows 10).
As a web developer, I can reset default styles of form elements, but I think Normalize.css can do (and should do) these better, because of its creation philosophy; What's your Idea?

I apologize for grammatical and/or syntactic errors, I am beginner in English.

[swimmwatch]

I like this idea, but i think there are elements that not customizing and because this not better idea in current moment

[PerseusTheGreat]

Some frameworks (like _Tweeter Bootstrap_) provide a shapely and unified styles for form elements.
I think some of those styles that, do not affect on shape or color of an element, and just unify defaults of all browsers, should be provided by something like _Normalize.css_.
As I said before, some styles to unify width, height, padding, margin, border, outline, and alignment are required for this purpose.

For example, in above picture, <input type="search">, <select> and all buttons have not same width like other textual inputs, or <input type="image"> has extra margin in some browsers.

Some default styles can make them unified, or in other words, can _Normalize_ them.

[barraponto]

@PerseusTheGreat that's exactly what normalize.css does: provides default styles to normalize elements.

When there is consensus among most of the browsers, we provide the same values as their user-agent stylesheets to enforce the consensus in other browsers (usually IE). But sometimes we do override the consensus, see https://github.com/necolas/normalize.css/blob/master/normalize.css#L27-L29 for instance.

Now, I think any change to form styles is certainly not backwards-compatible. In that sense it might be worth trying a separate file normalize-forms.css or even a separate project. But I do think web design would be better if we could normalize the forms.

[PerseusTheGreat]

@barraponto, your idea about normalize-forms.css sounds great. Developers can use it optionally. But I think it should be a optional module of main normalize.css, not a separate project.

[battaglr]

Sadly, there's no safe way of normalizing form elements without introducing very opinionated styles. 😞

[jonathantneal]

It would be appropriate promote opinionated libraries that extend normalize.css. Something like normalize-forms.css sounds like it would fit such a category.

Unfortunately, as @battaglr points out, we can’t normalize form elements (without introducing opinionated styles).

[luxlogica]

I feel saddened to see that this discussion was so short, and the issue has been closed and dismissed. Sorry, but I strongly disagree with the idea that normalising/standardising the style of form elements on a website is in any way against OS UI standards, or that it would be any more opinionated than standardising the styling of any other element - because:

1. Different browsers on the same platform - e.g. Safari on Mac and Firefox on Mac - display form elements in very different styles. This clearly shows that these elements don’t follow platform UI guidelines, but rather, are simply styled inconsistently by each browser as they feel like. Normalising these differences is exactly the purpose of projects like these.
2. When was the last time you saw a call-to-action button on a hero banner, which actually followed the OS UI standard guidelines? Web developers need to custom-style form elements MUCH more frequently than they need to follow arbitrary OS UI standards. Once again, the whole point of projects like these is to make the developer work easier and less buggy - and we’re coming up short big time where forms are concerned.
3. OS UI guidelines are ever-changing, and highly opinionated. If we were to style our sites according to OS UI guidelines, a site on the Mac would look substantially different to a site in Windows, or Linux, or Android. That’s the very opposite of what the vast majority of web developers want to do, and again, the very opposite of what projects like these aim to provide - which is a standardised starting point to their styling work, that is as stable and reliable as possible.

[barraponto]

BTW, there are ongoing efforts to standardize form inputs with better opinionated styles.
https://blog.chromium.org/2020/03/updates-to-form-controls-and-focus.html

[y1n0]

The library Formalize is worth mentioning regarding this subject

[PerseusTheGreat]

The library Formalize is worth mentioning regarding this subject

@y1n0
Its latest update backs to 6 years ago.
It uses JavaScript.
It has opinionated styles.