重置/删除所有样式的输入,选择和按钮跨所有浏览器,包括移动

Question

我已经搜索了所有这些,但我只能找到如何更改/修改输入,选择和按钮元素的样式.

我想要做的是在所有浏览器和移动设备上删除除值本身以外的所有阴影,边框,背景,图标等.

Answer 1

简单地：

input {
  all: unset;
}

参考：

• https://developer.mozilla.org/en-US/docs/Web/CSS/all
• https://developer.mozilla.org/en-US/docs/Web/CSS/unset

Answer 2

您可以使用normalize.css来改进跨浏览器呈现.您可以在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

请将以下样式添加到上述元素中.

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

Answer 3

通过 css 设置输入标签的样式。

请参阅： http: //www.w3schools.com/tags/tag_input.asp

输入等：

input, select, textarea {

}

纽扣：

input[type="submit"] {

}

重置CSS： http: //cssreset.com/

漂亮的重置： https: //necolas.github.io/normalize.css/