背景
在实际的前端开发中，我们通常会使用 CSS Reset 来重置浏览器默认样式以便更好地控制页面布局。但是使用 CSS Reset 也会带来一些问题，其中之一就是 input 框样式丢失的问题。
问题描述
当我们使用 CSS Reset 后，input 框的默认样式会被重置，导致 input 框看起来非常丑陋，并且在不同浏览器之间的样式差异也非常大。
以下是一个示例代码，展示了使用 CSS Reset 后 input 框的样式丢失问题：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------- ----- ------------
----- ---------------- -----------------
-------
------
------
------ --------------------------------
------ ----------- ------------- ----------------
----
------ --------------------------------
------ --------------- ------------- ----------------
----
------- -----------------------------
-------
-------
-------/* reset.css */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}解决方法
为了解决 input 框样式丢失的问题，我们可以使用以下两种方法：
1. 自定义 input 样式
我们可以通过自定义 input 样式来解决样式丢失的问题。具体的实现方式可以使用 CSS 或者 JavaScript。
使用 CSS 实现
我们可以通过 CSS 来自定义 input 样式，具体的实现方式如下：
input[type=text], input[type=password] {
border: 1px solid #ccc;
border-radius: 3px;
padding: 5px;
font-size: 14px;
}使用 JavaScript 实现
我们可以通过 JavaScript 来自动为 input 元素添加样式，具体的实现方式如下：
var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].type === 'text' || inputs[i].type === 'password') {
inputs[i].classList.add('styled-input');
}
}.styled-input {
border: 1px solid #ccc;
border-radius: 3px;
padding: 5px;
font-size: 14px;
}2. 使用 CSS Framework
另外一个解决 input 框样式丢失问题的方法是使用 CSS Framework。CSS Framework 是一种预定义好的 CSS 样式库，可以帮助我们更快速地开发页面，同时也可以解决 input 框样式丢失的问题。
常见的 CSS Framework 包括 Bootstrap、Foundation、Semantic UI 等。以 Bootstrap 为例，我们只需要在页面中引入 Bootstrap 样式库，就可以自动为 input 元素添加样式，具体的实现方式如下：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------- ------------
----- ---------------- ---------------------------------------------------------------------
-------
------
----- ------------------------
---- -------------------
------ -------------- -------------------- ---------------------------
---- ------------------
------ ----------- -------------------- ------------- ----------------
------
------
---- -------------------
------ -------------- -------------------- ---------------------------
---- ------------------
------ --------------- -------------------- ------------- ----------------
------
------
---- -------------------
---- ---------------------- -----------
------- ------------- ---------- ----------------------------
------
------
-------
------- ------------------------------------------------------------------
------- ---------------------------------------------------------------------------
-------
-------总结
CSS Reset 是前端开发中常用的技术，但是它也会带来一些问题，其中之一就是 input 框样式丢失的问题。为了解决这个问题，我们可以使用自定义样式或者 CSS Framework。无论是哪种方式，都需要在实际开发中根据需求和实际情况进行选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/658a4c7ceb4cecbf2df7ed66