在进行网站或项目开发时，我们经常使用 CSS Reset 来解决浏览器之间的样式差异化问题，达到统一风格的目的。但是，有时候 CSS Reset 可能会对 input 和 textarea 元素产生影响，导致样式失效，影响用户体验。接下来，我们将会讲解如何避免 CSS Reset 对 input 和 textarea 的影响。
为什么会出现影响？
大多数的 CSS Reset 都会将元素的 padding 和 border 设置为 0，包括 input 和 textarea。虽然这样做可以确保浏览器默认样式标准化，但同时也会导致元素的内外边距无法生效。这就意味着，我们无法自由地控制元素的间距和边框样式。
而 input 和 textarea，尤其是 input 元素，通常会与其他元素紧密排列在一起，控制它们的间距和边框样式就显得尤为重要。因此，当 CSS Reset 影响到 input 和 textarea 元素时，我们需要寻找新的方法来解决这个问题。
解决方案
方法一：重置指定元素
针对 CSS Reset 固定设置的 input 和 textarea 样式，我们可以手动设置其 padding 和 border 样式，具体代码如下：
input[type="text"], input[type="password"], textarea {
padding: 4px;
border: 1px solid #ccc;
}通过以上代码，我们重新定义了 input 和 textarea 的样式，改变它们的内外边距和边框样式，并解决了 CSS Reset 对它们的影响问题。
不过，需要注意的是，不同的开发人员可能会出于习惯而选择使用不同的 CSS Reset，因此在操作中，我们还需要留意这个问题。
方法二：更改 Reset 样式
当默认设置的 CSS Reset 对 input 和 textarea 的影响较大时，我们可以修改 Reset 样式，去除它们的影响。
例如，可以在 Normalize.css 中将 input 和 textarea 的样式重新定义。具体代码如下：
-- -------------------- ---- -------
-------------------
-----------------------
---------------------
-------- -
------------------- -----
---------------- -----
----------- -----
----------- -----------
------------- ------
------------- ----
------------- -----
-------- ----
-该代码中将 input、textarea 的外观（-webkit-appearance、-moz-appearance 和 appearance）设置为 none，意为令其不受浏览器默认样式的影响，同时通过 box-sizing：border-box 解决了默认 padding 和 border 样式无法生效的问题。
方法三：使用类名
最后一种方式，也是最推荐的一种方式，就是定义特定的类名，仅对其进行样式修改。
例如，我们可以在 HTML 中给 input、textarea 定义类名 my-input 和 my-textarea:
<input type="text" class="my-input"> <textarea class="my-textarea"></textarea>
然后，我们在 CSS 中定义这些类名的样式，通过这种方式实现样式修改：
.my-input, .my-textarea {
padding: 4px;
border: 1px solid #ccc;
}这种方式在不影响其他元素样式的情况下，精确定义 input 和 textarea 的样式，为我们最常采用的方式。
总结
避免 CSS Reset 对 input 和 textarea 的影响，需要我们灵活运用实用的方法，针对不同情况采用不同策略，最终达到 optimal 的效果。这对于前端开发人员来说，是一个不可忽视的技能，希望通过这篇文章，能够帮助初学者更好地掌握这个方面的知识。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64813cf448841e98940a805e