padding for input, button and textarea

[yuheiy]

padding for input, button or textarea differs depending on the browser. So, I think that we should normalize it.

[strider72]

Can you be more specific as to which browsers default to what padding?

[aifrim]

@strider72 Chrome Version 64.0.3282.186 (Official Build)

user agent stylesheet
input:not([type]), input[type="email" i], input[type="number" i], input[type="password" i], input[type="tel" i], input[type="url" i], input[type="text" i] {
    padding: 1px 0px;
}

and 

input {
    -webkit-appearance: textfield;
    background-color: white;
    -webkit-rtl-ordering: logical;
    cursor: text;
    padding: 1px;
    border-width: 2px;
    border-style: inset;
    border-color: initial;
    border-image: initial;
}

[oles]

I've no idea where to even start. Here's a couple of random samples from various current browsers from http://necolas.github.io/normalize.css/8.0.0/test.html

android google chrome 68

chrome 68

edge 17

firefox 61

ie 11

ios 9 safari

windows phone 8.1

[oles]

@necolas any thoughts on this?

This issue was originally only for padding, but there's so many other things that could use some normalization.

[garrettw]

As noted in #587 and #646 (among others, I'm sure), form element normalization has been deemed out-of-scope for this project -- because, as @jonathantneal noted on the latter issue:

we can’t normalize form elements (without introducing opinionated styles).

One user has created a project to accomplish that, though: https://github.com/visicode/formalize.css

[oles]

Completely fair.

Perhaps add something along the lines of "normalize.css should not get into overriding OS styling." to the readme - to prevent further related issues :+1:

Thanks for the input, @garrettw

[luxlogica]

OS UI guidelines are comprehensive, ever-changing, and extremely opinionated - eg., they usually specify typography for all text elements, but these settings might change (a little or a lot) with a new OS release. Even worse, as each OS aims to establish their own brand and ‘look-and-feel’, there is no consistency between the various UI guidelines for Mac, Windows, Linux or Android.

Perhaps because of that, we can easily see that the browsers themselves don’t follow OS UI guidelines. Look at the standard form element styling of 2 different browsers on the same platform - eg, look at buttons on Safari and Firefox on Mac - and you will see huge differences. Browsers are styling these elements in their own quirky ways, and the differences are not OS-guidelines based: they are browser-based. Standardising browser-based differences seems to be the goal of this project.

In any case, IMHO no web developer wants to create a website that will ‘respect the OS UI guidelines’ - because that site would look substantially different on every platform. More importantly: a site usually has to look like the brand/company/product/service/person it represents - not like the OS the user is using to view it. When was the last time you saw a button in a hero banner, that looked like a standard OS button? So the developer will have to struggle with quirky browser differences in order to style that button. Same for most form controls. And once again, helping the developer by normalising the browser styling ‘quirks’ seems to be the goal of this project. And judging by the amount of issues and requests received over the years, I’d say it looks like something that is wanted.

[Toddses]

I don't know why you're drudging up a years ago decided issue.

https://github.com/visicode/formalize.css

Seems like a perfectly good solution to what you're looking for.

[luxlogica]

There are indeed a number of solutions available - including sanitize.css, and the highly opinionated Bootstrap Reboot - all of which build upon normalize.css, by adding further normalisations (which, apparently, most agree seem to be lacking here).

The point here being that the normalize.css project could make everyone’s life easier - including the life of the maintainers in the projects mentioned above - simply by doing what it set out to do: normalise the style of every element, reliably, which should include forms.

Given the current landscape of website and web app development, projects like normalize.css are - unfortunately - more relevant than never. But for any ‘normalising’ stylesheet to exclude form elements - so necessary in today’s interfaces - feels like an arbitrary, impractical and absurdly outdated decision. It may be time to revise these points, to perhaps bring the project up-to-date with current development practices, and with what developers want - and need - in terms of normalisation.

[Toddses]

Plenty of people like this project precisely because it aims to avoid opinionated normalizations. Those people will not find their life any easier by someone deciding how form elements should look by default. It would be a hell of a lot easier for you to just use something like formalize.

[luxlogica]

Yes, indeed I do - as do lots of other people. Saying that providing a standard styling for form elements is ‘opinionated’, but that providing a standardised typography for every element, (including margins) is not, is pretty inconsistent and arbitrary.

Browsers are (inconsistently) opinionated, and specially so when it comes to form elements. Dealing with these inconsistencies is the very purpose of this project. The fact that projects like formalize even exist shows that there are gaps that are not being addressed.

[Toddses]

But the gaps are filled. Projects like formalize fill the gap that the users and developers of normalize collectively decided normalize should not fill.

I don't understand why this is not an acceptable solution to you, but I guess it's not. Anyway, I wouldn't anticipate normalize is going to be changing anything here. Good luck to you.

[luxlogica]

I agree - unfortunately, as there has been no official update since 2018, and the project feels very stale, and somewhat outdated. The appearance and proliferation of so many other normaliser projects - most of them merely updating and addressing shortcomings here (like these long-standing inconsistencies in form elements) - should provide guidance to possible improvements in the future. Removal of code for compatibility with outdated browsers is being addressed by modern-normalize. Lack of standardisation in form elements is being addressed by several other projects, like reboot and sanitize.css. The sanitize.css project is gaining great popularity, not only because it addresses form inconsistencies (and also puts its opinionated typographical styles into a separate stylesheet) but also because it focuses on what developers need in practice, which is a thorough set of predictable styles.

With its outdated, inconsistent and unreliable standardisation, normalize.css is actively encouraging developers to look elsewhere - which is a great shame, and not a sign of health in any project.

[mnr73]

https://github.com/necolas/normalize.css/issues/778#issuecomment-736147440