前言
在前端开发过程中，往往需要使用 CSS Reset 来消除不同浏览器之间默认样式的差异，以确保页面的一致性。但是，在一些场景下，我们仍然需要保留浏览器默认输入框的样式，如何实现这一目的呢？本文将介绍 CSS Reset 和保留浏览器默认输入框样式的方法。
CSS Reset
CSS Reset 是一种用于重置浏览器默认样式的技术。该技术通过将所有 HTML 元素的样式设置为相同的值（通常是 0），来消除浏览器默认样式的影响。常见的 CSS Reset 工具包括 Eric Meyer’s CSS Reset、normalize.css 等。
假设我们使用 normalize.css 进行 CSS Reset，那么文件的代码如下：
-- -------------------- ---- ------- --- ------------- ------ - --- ------- - -------------------------------- -- -- -------- -------------------------------------------------------------------------- -- --- ------ -- -- ----- -------------------------------------------------------------------------- -- --- ------ -- ------------------- ----------------------- -------------------- ------------------ --------------------- -------- - ----------- ----- ---------------- ----- ------------------- ----- - --- ------ --
上面的代码中，最后一段样式是用于自定义输入框外观的样式。它将 appearance 属性设置为 none，这会禁用浏览器默认输入框的外观。
保留浏览器默认输入框的样式
方法一：使用 :not() 伪类
要保留浏览器默认输入框的样式，我们可以使用 :not() 伪类，将需要自定义外观的元素排除在样式之外。例如，我们可以将上面的样式修改为：
input:not([class*=custom]),
textarea:not([class*=custom]) {
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
}上面的代码指定了除了包含类名称包含“custom”的输入框和文本框之外，其他的输入框和文本框都使用浏览器默认样式。
方法二：使用 class 名称
我们也可以为需要自定义外观的元素添加自定义的类名称，然后在样式中指定这些类名称，来定义它们的外观。例如，我们可以使用以下样式：
-- -------------------- ---- ------- -------------- ---------------- - -- --- ------ ----- ---- -- - -- ----- ----- ------ -- -------------------------------------- ------------------------------------------ --------------------------------------- ------------------------------------- ---------------------------------------- ------------------------------ - ----------- ----- ---------------- ----- ------------------- ----- -
上面的代码指定了类名称为“custom-input”或“custom-textarea”的输入框或文本框使用自定义样式，而其他输入框或文本框则使用浏览器默认样式。
总结
本文分别介绍了 CSS Reset 和保留浏览器默认输入框样式的方法，并提供了相应的示例代码。使用这些技巧，可以在保持页面一致性的同时，以不同的方式自定义输入框和文本框。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/653fcfca7d4982a6eb9613bc