重置/删除所有浏览器的输入、选择和按钮的所有样式

Question

我已经到处找过了，但我只能找到如何更改/修改输入、选择和按钮元素的样式。

我想要做的是移除所有的阴影，边框，背景，图标等等，除了值本身，跨越所有浏览器和移动设备。

Answer 1

您可以使用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 2

简单地说：

input {
  all: unset;
}

参考文献：

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

Answer 3

如果您需要重置所有内容，为焦点执行此操作也会有所帮助：

.input:focus {
    outline: none;
}