、 input分类

根据显示效果将input分为五类

1. 文本框类：type值为text，password。
2. 按钮类：type值为button，reset，submit。
3. 选框类：type值为checkbox，radio。
4. 图片类：type值为image。
5. 文件类：type值为file。

二、原始显示效果

首先我们先看一下上述各类input在浏览器中原始显示效果，代码如下

     <!-- html-->
     <p>1.文本框类</p>
    <input type="text" class="text" value="文本" />
    <input type="password" class="password" value="密码" />
    <p>2.按钮类</p>
    <input type="button" class="button" />
    <input type="reset" class="reset" />
    <input type="submit" class="submit" />
    <p>3.选框类</p>
    <input type="checkbox" class="checkbox" name="" id="" />
    <input type="radio" class="radio" />
    <p>4.图片类</p>
    <!-- 此处省略了图片地址-->
    <input type="image" class="image" src="" />
    <p>5.文件类</p>
    <input type="file" class="file" />
    <input type="hidden" class="hidden" />

在pc端各主流浏览器中显示效果如下

在移动端各主流浏览器中显示效果如下

三、自定义样式（含清除默认样式）

1. 文本框类

（1）占位文本样式修改(placeholder)
占用文本样式修改使用伪元素::placeholder,这伪元素虽然还是一个实验功能，但是其实已经得到了大部分浏览器的支持，如果浏览器版本过低可以使用添加前缀来做兼容，MDN文档给的兼容情况如下图。

值得注意的是，该伪元素可以支持修改的属性值有限，具体支持的属性见下图

（2）聚焦样式修改（focus）
聚焦样式修改使用伪类:focus,该伪类可以支持修改input所有的css属性，可以放心使用
（3）常规样式修改
常规样式例如border，color，font-size的部分都可以直接修改。
（4）清除默认样式
上面css属性修改可以覆盖掉大部分原有的样式，从而达到清除默认样式的效果。但是在iOS中input上不会有默认的阴影样式覆盖不了，需要使用-webkit-appearance: none;将其清除。
注意：在ios中还有一个与其他浏览器不同的地方——当input的line-height大于font-size时，输入文字时光标长度不对，下图所示input的line-height=3，可以看出其光标是从input最上方开始的，这样显然显示效果不好，因此我们建议line-height=1，如果需要扩展input的高度，使用padding来实现。

2. 按钮类

按钮类input修改默认样式比较简单，只需要常规样式修改和伪类修改。其中伪类:hover和:active比较常用，只要用于修改悬停样式和点击样式。

3. 选框类

选框类input在不同浏览器中显示效果差别很大，因此对于前端开发者来说，自定义样式是很有必要的。
1）单选框样式自定义
常用的办法是隐藏原来的单选框，然后创建一个单选框。以下面代码为例

<!-- label中for属性值与input中id值相同即可关联 -->
<input type="radio" class="radio" name="sex" id="male"  />
<label for="male" class="label">男</label>
<input type="radio" class="radio" name="sex" id="female" />
<label for="female" class="label">女</label>

/*css*/
/* 隐藏原有的ridio选框 */
.radio {
  display: none;
}
.label {
  position: relative; /* 作为定位基准 */
  margin-left: 20px; /* 给label左侧添加margin（padding也行），给自定义radio留位置 */
}

/* 自定义radio（未选中）样式 */
.label::before {
  display: inline-block;
  position: absolute;
  content: "";
  width: 16px;
  height: 16px;
  border: 1px solid yellowgreen;
  left: -20px;
  top: 3px; /*根据label高度和自身需求设置top*/
}

/* 自定义radio（选中）样式 */
.radio:checked + .label::before {
  border: 1px solid skyblue;
}
.radio:checked + .label::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background-color: skyblue;
  left: -16px;
  top: 7px;
}

显示效果如下图

注意

1. input类元素不支持:before和:after，因此需要靠label来实现；
2. 上例使用了相邻选择器来选定元素，这是上述效果得以实现的基础（ridio和label中间不能添加其他的元素）。

上面的例子只是一种方法，如果不使用为元素，可以在radio和label中间添加一个div作为自定义的radio选框。

2）多选框样式自定义
多选框样式自定义与单选框自定义样式的方式一摸一样，如下面代码

<!-- html -->
<input type="checkbox" class="checkbox" name="sex" id="male" />
<label for="male" class="label">男</label>
<input type="checkbox" class="checkbox" name="sex" id="female" checked />
<label for="female" class="label">女</label>
<input type="checkbox" class="checkbox" name="sex" id="undefind" checked />
<label for="undefind" class="label">不明</label>

/* css*/
/* 隐藏原有的checkbox选框 */
.checkbox {
  display: none;
}
.label {
  position: relative; /* 作为定位基准 */
  margin-left: 20px; /* 给label左侧添加margin（padding也行），给自定义checkbox留位置 */
}

/* 自定义checkbox（未选中）样式 */
.label::before {
  display: inline-block;
  position: absolute;
  content: "";
  width: 16px;
  height: 16px;
  border: 1px solid yellowgreen;
  left: -20px;
  top: 3px; /*根据label高度和自身需求设置top*/
}

/* 自定义checkbox（选中）样式 */
.checkbox:checked + .label::before {
  border: 1px solid skyblue;
}
.checkbox:checked + .label::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background-color: skyblue;
  left: -16px;
  top: 7px;
}

显示效果如下图

4. 图片类

这类input在平常使用较少，如果需要显示图片建议直接使用img标签。

5. 文件类

目前常用的做法是使用元素（一般使用a元素）包裹住input，外层元素样式即为此次自定义样式，同时将input透明度设置为0，宽高与外层元素宽高一致，这样可以保证点击外层元素是出发input。示例代码如下

<!-- html -->
<a href="javascript：;" class="file">
  <input type="file" name="" id="" />点击这里上传文件
</a>

/* css */
.file {
  padding: 4px 10px;
  height: 20px;
  line-height: 20px;
  position: relative;
  cursor: pointer;
  color: #888;
  background: #fafafa;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
  display: inline-block;
  zoom: 1;
}
.file input {
  position: absolute;
  opacity: 0;
  filter: alpha(opacity=0);
  cursor: pointer;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.file:hover {
  color: #444;
  background: #eee;
  border-color: #ccc;
  text-decoration: none;
}

显示效果如下：

注意：以上操作会隐藏上传的文件，如果需要显示，需要额外添加一个元素并且配合使用js用于显示上传的文件，在此不过多说明，有兴趣的可以自行研究。

绍input[type="hidden"],input[type="file"]两种特殊的表单元素，readonly disabled只读属性与禁用属性的区别于使用场景。