重置/删除所有浏览器（包括移动设备）上的输入、选择和按钮的所有样式

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

如果您需要重置所有内容，这样做以集中注意力也可能有所帮助：

.input:focus {
    outline: none;
}

Answer 4

要完全清除

input

，请使用这些样式

别忘了

outline

.my-input-class{
  outline: none;
  border:none;
  background-image:none;
  background-color:transparent;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;  
}

Answer 5

除了@dotslashroot的

all: unset

输入类型数字之外，您还将获得箭头，以使用您应该使用的所有样式删除它们：

input{
  all: unset;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* For Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

Answer 6

重置所有输入：

input,
textarea,
select {
    all: revert;
}

重置特定类型的输入：

input[type=checkbox],
input[type=radio],
input[type=button],
input[type=submit],
input[type=reset] {
    all: revert;
}

重置按钮：

input[type=button],
input[type=submit],
input[type=reset] {
    all: revert;
}

Answer 7

通过 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/