純CSS自定義input樣式

、 input分類

根據顯示效果將input分為五類

文本框類：type值為text，password。
按鈕類：type值為button，reset，submit。
選框類：type值為checkbox，radio。
圖片類：type值為image。
文件類：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;
}

顯示效果如下圖

注意

input類元素不支持:before和:after，因此需要靠label來實現；
上例使用了相鄰選擇器來選定元素，這是上述效果得以實現的基礎（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只讀屬性與禁用屬性的區別于使用場景。

ava筆記

一設置編碼集:

設置請求的編碼:

request.setCharacterEncoding(服務器編碼)

在代碼中也就是這樣：

本身這個語法是對請求實體進行設置編碼，針對于post有效，如果需要對get同時設置編碼，需要在設置端口號的地方添加一個useBodyEncodingForURI="true".，如下圖：

設置響應實體中的編碼:

response.setHeader("content-type","text/html;charset=服務器編碼")

在代碼中是這樣：

表單如果是get方式提交，那么action后面跟的參數會被覆蓋。解決方式，1)使用post傳參。2)可以使用隱藏域

二、下載功能:

1)設置下載的響應頭

response.setHeader("content-disposition","attachment;filename=文件名")

文件名是用戶所接收到的文件的名字，如果文件名字中帶中文，需要設置編碼集為iso8859-1

在代碼中是這樣：

2)將資源以流的方式輸出

三、服務器跳轉的兩種方式:

請求轉發:

request.getRequestDispacher(地址).forward(請求對象,響應對象)

特點:

1)整個過程只有一次請求

2)地址欄不發生變化

3)效率高

4)不能訪問外部資源

5)絕對路徑的/ 代表的是根目錄之后的 /

6)一般習慣性的在請求轉發之后添加一個return

重定向:

response.sendRedirect(地址)

特點:

1)整個過程只有兩次請求

2)地址欄發生變化

3)效率低

4)能訪問外部資源

5)絕對路徑的/ 代表的是端口號之后的 /

6)一般習慣性的在重定向之后添加一個return

路徑總結:

請求轉發: 絕對路徑的/ 代表的是根目錄之后的 /

重定向: 絕對路徑的/ 代表的是端口號之后的 /

頁面的路徑: 絕對路徑的/ 代表的是端口號之后的 /

在線咨詢

上一篇：1分鐘自我介紹，如何抓住面試官耳朵？AI做到了！(建
下一篇：穩步提高城鎮化質量和水平-《深入實施以人為本的新型城

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商