Reset/remove all styles for input, select and button across all browsers including mobile

Question

I've searched all over for this but I can only find how to change/modify styles for input, select and button elements.

What I want to do is remove all shadows, borders, background, icons etc everything except the value itself, across all browsers and mobile.

Answer 1

You can use normalize.css for improve the cross-browser rendering. You can update the following class in the normalize.css.

button,
input,
optgroup,
select,
textarea,html input[type="button"],
input[type="reset"],
input[type="submit"],button[disabled],
html input[disabled],button::-moz-focus-inner,
input::-moz-focus-inner, input[type="checkbox"],
input[type="radio"], input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button, input[type="search"], input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration

Please add the following style to the above elements.

element {
    border:none;
    background-image:none;
    background-color:transparent;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}