、 input分類

根據(jù)顯示效果將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端各主流瀏覽器中顯示效果如下

在移動(dòng)端各主流瀏覽器中顯示效果如下

三、自定義樣式（含清除默認(rèn)樣式）

1. 文本框類

（1）占位文本樣式修改(placeholder)
占用文本樣式修改使用偽元素::placeholder,這偽元素雖然還是一個(gè)實(shí)驗(yàn)功能，但是其實(shí)已經(jīng)得到了大部分瀏覽器的支持，如果瀏覽器版本過(guò)低可以使用添加前綴來(lái)做兼容，MDN文檔給的兼容情況如下圖。

值得注意的是，該偽元素可以支持修改的屬性值有限，具體支持的屬性見(jiàn)下圖

（2）聚焦樣式修改（focus）
聚焦樣式修改使用偽類:focus,該偽類可以支持修改input所有的css屬性，可以放心使用
（3）常規(guī)樣式修改
常規(guī)樣式例如border，color，font-size的部分都可以直接修改。
（4）清除默認(rèn)樣式
上面css屬性修改可以覆蓋掉大部分原有的樣式，從而達(dá)到清除默認(rèn)樣式的效果。但是在iOS中input上不會(huì)有默認(rèn)的陰影樣式覆蓋不了，需要使用-webkit-appearance: none;將其清除。
注意：在ios中還有一個(gè)與其他瀏覽器不同的地方——當(dāng)input的line-height大于font-size時(shí)，輸入文字時(shí)光標(biāo)長(zhǎng)度不對(duì)，下圖所示input的line-height=3，可以看出其光標(biāo)是從input最上方開(kāi)始的，這樣顯然顯示效果不好，因此我們建議line-height=1，如果需要擴(kuò)展input的高度，使用padding來(lái)實(shí)現(xiàn)。

2. 按鈕類

按鈕類input修改默認(rèn)樣式比較簡(jiǎn)單，只需要常規(guī)樣式修改和偽類修改。其中偽類:hover和:active比較常用，只要用于修改懸停樣式和點(diǎn)擊樣式。

3. 選框類

選框類input在不同瀏覽器中顯示效果差別很大，因此對(duì)于前端開(kāi)發(fā)者來(lái)說(shuō)，自定義樣式是很有必要的。
1）單選框樣式自定義
常用的辦法是隱藏原來(lái)的單選框，然后創(chuàng)建一個(gè)單選框。以下面代碼為例

<!-- label中for屬性值與input中id值相同即可關(guān)聯(lián) -->
<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; /* 作為定位基準(zhǔn) */
  margin-left: 20px; /* 給label左側(cè)添加margin（padding也行），給自定義radio留位置 */
}

/* 自定義radio（未選中）樣式 */
.label::before {
  display: inline-block;
  position: absolute;
  content: "";
  width: 16px;
  height: 16px;
  border: 1px solid yellowgreen;
  left: -20px;
  top: 3px; /*根據(jù)label高度和自身需求設(shè)置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來(lái)實(shí)現(xiàn)；
2. 上例使用了相鄰選擇器來(lái)選定元素，這是上述效果得以實(shí)現(xiàn)的基礎(chǔ)（ridio和label中間不能添加其他的元素）。

上面的例子只是一種方法，如果不使用為元素，可以在radio和label中間添加一個(gè)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; /* 作為定位基準(zhǔn) */
  margin-left: 20px; /* 給label左側(cè)添加margin（padding也行），給自定義checkbox留位置 */
}

/* 自定義checkbox（未選中）樣式 */
.label::before {
  display: inline-block;
  position: absolute;
  content: "";
  width: 16px;
  height: 16px;
  border: 1px solid yellowgreen;
  left: -20px;
  top: 3px; /*根據(jù)label高度和自身需求設(shè)置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標(biāo)簽。

5. 文件類

目前常用的做法是使用元素（一般使用a元素）包裹住input，外層元素樣式即為此次自定義樣式，同時(shí)將input透明度設(shè)置為0，寬高與外層元素寬高一致，這樣可以保證點(diǎn)擊外層元素是出發(fā)input。示例代碼如下

<!-- html -->
<a href="javascript：;" class="file">
  <input type="file" name="" id="" />點(diǎn)擊這里上傳文件
</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;
}

顯示效果如下：

注意：以上操作會(huì)隱藏上傳的文件，如果需要顯示，需要額外添加一個(gè)元素并且配合使用js用于顯示上傳的文件，在此不過(guò)多說(shuō)明，有興趣的可以自行研究。

紹input[type="hidden"],input[type="file"]兩種特殊的表單元素，readonly disabled只讀屬性與禁用屬性的區(qū)別于使用場(chǎng)景。