-
Notifications
You must be signed in to change notification settings - Fork 10.5k
Description
I know you will not agree (#578), but i believe that the only solution to get rid of all those inputs style problems we have is to completely remove all browsers specific UI style, so all forms will look exactly the same on every browser!
And this can be done easily, starting from setting the same border and background color to all fields!
I know it's arbitrary colors but one can change them easily, reducing the problem to a simple design question!
The result is that we don't have to think about browsers specifics anymore and only concentrate on design, forgetting about compatibility/consistency.
Here is the main part of the code i use for that (without the focus and hover parts):
button,
input:not([type="range"]):not([type="file"]):not([type="image"]),
select,
textarea {
border: 1px solid #c0c0c0;
}
[type="color"] {
background-color: #fff;
}
[type="file"] {
background-color: transparent;
}
button,
html [type="button"],
[type="reset"],
[type="submit"] {
background-color: #e1e1e1;
}
::-webkit-file-upload-button {
border: 1px solid #c0c0c0;
background-color: #e1e1e1;
}
::-ms-browse {
border: 1px solid #c0c0c0;
}