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

Posted 2023-03-11

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

【英文标题】：Reset/remove all styles for input, select and button across all browsers including mobile

【发布时间】：2016-02-02 06:51:34

【问题描述】：

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

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

【参考方案1】：

要彻底清除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;  

【参考方案2】：

简单地说：

input 
  all: unset;

参考资料：

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

【讨论】：

这是你的答案。

【参考方案3】：

如果你需要重置所有的东西，这样做也可以帮助你集中注意力：

.input:focus 
    outline: none;

【参考方案4】：

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

见：http://www.w3schools.com/tags/tag_input.asp

输入等：

input, select, textarea 

按钮：

input[type="submit"] 

重置 css： http://cs-s-reset.com/

好看的重置： https://necolas.github.io/normalize.css/

【讨论】：

谢谢，是的，我知道您必须通过 css 对其进行样式设置，但我想知道删除所有样式的 css 是什么。所以基本上只剩下值/文本。在所有浏览器和移动设备上移除图标、阴影、背景、边框等

您链接到的那个网站会让您注册他们的时事通讯以获取在网络上免费发布的 CSS。这是最流行的 CSS 重置：meyerweb.com/eric/tools/css/reset

【参考方案5】：

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

【讨论】：

嗨，谢谢，我刚刚在 jsfiddle 上尝试过，但似乎不起作用。仍然可以在选择、输入等上看到边框、图标等

好像不是很全面。

另外你不需要background-color: transparent 只需background: none。

请不要忘记设置color: black 或任何其他合理的值，因为它不能保证为黑色（例如，某些旧版本的 Firefox 可能会在深色系统主题时将其设置为浅色被使用）。

另加outline: none;