在前端开发中，我们经常会使用 CSS Reset 来消除浏览器默认样式，以便更好地控制页面元素的样式。然而，使用 CSS Reset 也会带来一些问题，其中之一就是 input 框样式的问题。在本文中，我们将探讨这个问题，并提供解决方案。
问题描述
当我们使用 CSS Reset 后，input 框的样式会变得很奇怪。例如，我们使用以下 CSS Reset：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}然后，在页面中添加一个 input 框：
<input type="text" placeholder="请输入内容" />
我们会发现，这个 input 框的样式会变得很奇怪，如下图所示：
这是因为 CSS Reset 中将所有元素的 padding 和 border 设置为 0，而 input 框的样式是依赖于这些属性的。因此，我们需要找到一种解决方案来解决这个问题。
解决方案
要解决这个问题，我们可以通过为 input 框添加一个特定的类来覆盖 CSS Reset 中的样式。例如，我们可以添加以下 CSS：
input[type="text"].input-reset {
padding: 5px;
border: 1px solid #ccc;
}然后，在页面中添加 input 框时，添加 input-reset 类：
<input type="text" placeholder="请输入内容" class="input-reset" />
这样，我们就可以通过添加特定的类来为 input 框添加样式，而不会受到 CSS Reset 的影响。
示例代码
以下是完整的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
---------- ----- --- ----- -----------------
-------
- -
------- --
-------- --
----------- -----------
-
------------------------------ -
-------- ----
------- --- ----- -----
-
--------
-------
------
------ ----------- ------------------- ------------------- --
-------
-------总结
在使用 CSS Reset 时，我们需要注意 input 框样式的问题。通过为 input 框添加特定的类，我们可以解决这个问题，并为 input 框添加样式，而不受到 CSS Reset 的影响。这个解决方案可以帮助我们更好地控制页面元素的样式，并提高页面的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/658d2710eb4cecbf2d318308