整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
文章介紹了html標簽里的input標簽和label標簽的美化效果！效果圖如下：
用在復選框中選擇，個性化了復選框的默認樣式，增強用戶體驗！
實現方法也非常簡單
下面看看代碼
html:
css:
瀏覽器自帶的input標簽，例如text,radio,checkbox的樣式都顯得很難看，雖然已經有類似于Bootstrap這種穩定的類庫可以使用，但是對于定制化的input樣式同樣難以滿足，今天我們就自己動手，一起來看看如何使用CSS3實現一個好看的input樣式。
CSS3
如果感興趣的，可以去github上去看源碼進行學習，地址如下：
https://github.com/zhouxiongking/article-pages/tree/master/articles/beautifulInput
首先我們來看下type為text的文本框元素，實現的動態效果如下圖所示。
效果圖
接下來我們來看看這樣的效果是如何實現的。頁面上的元素主要是以下幾個部分。
input元素，將其border設置為none
label元素，與input元素綁定
div元素，實際為下面的橫線
我們需要達到的效果是，在未點擊input元素時，通過label元素顯示提示信息；在input元素獲得焦點后label元素會移動到input元素上面，并且顯示出動態的獲取焦點的過程，此后可以在input元素中正常輸入信息。
首先我們來看看HTML部分的代碼。
HTML代碼
通過html部分代碼，可以看出頁面主要由input，label，div三個元素構成。
然后我們再來看看CSS部分的代碼，由于CSS部分代碼比較多，我們拆開來看。
先看最外層的容器樣式代碼如下。
外層容器
然后是input標簽的樣式，在CSS3中提供了placehoder的樣式，在這里為了防止placeholder屬性會覆蓋到label標簽，我們將其透明度設置為0。關于input元素以及其placeholder屬性值的css樣式部分如下所示。
input樣式
緊接著是下面的label標簽的樣式，因為在input獲取焦點時，label元素會移動到input上方，因此需要給label元素加上一個動畫效果。label部分代碼如下所示。
label部分代碼
其次是最下面的一條橫線，在input元素未獲取焦點的狀態下，其長度為0。
橫線
最后是在input獲取焦點后的樣式變化，下面的橫線會逐漸延長至最大寬度，而且具有不同的顏色，這一動態效果由下面的代碼決定。
獲取焦點動態效果
至此，頁面上所有的代碼均已完成，在瀏覽器中運行頁面后會看到文章開始時的效果。
在萬千已經成型的前端框架中，自己寫出一個樣式也算是一種收獲，在后面的文章中，我會繼續寫關于如何實現checkbox和radio樣式的文章，敬請期待~
完了標簽屬性后，接著說下HTML中最后的標簽--label
<label>標簽為input元素定義標注，用于綁定一個表單元素，當點擊一個<label>標簽內的文本時，瀏覽器就會自動講焦點(光標)轉到或者選擇對應的表單元素上，用來增加用戶體驗。接著看下語法:
<label for="sex">男</label>
<input type="radio" name="sex" id="sex">
<label>里的for和<input>里的id需要對應起來，值需要是一樣的。即核心點為: <label>標簽的for屬性應當與<input>元素的id屬性相同。可以看下效果:
首先是名稱+單選框
之前點擊單選框，必須要點擊到小圓圈按鈕處才行，現在點擊顏色+小圓圈區域就可以了。
來看看代碼展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<label for="color">
顏色
</label>
<input type="radio" name="紅色" id="color">
</body>
</html>
其中for和id都是color, 我們加上復選框看看效果
點擊后的效果:
然后看看已經添加了的代碼:
<label for="color">
顏色
</label>
<input type="radio" name="紅色" id="color">
藍色<input type="checkbox" name="藍色" id="color">
綠色<input type="checkbox" name="綠色" id="color">
紫色<input type="checkbox" name="紫色" id="color">
這里就多了復選框，但是發現點擊文字不能勾選，然后是沒有加<label>標簽屬性，我們再加上試試(終于寫出來代碼bug)
看下如何修改的代碼:
<body>
<label for="color">
顏色
</label>
<input type="radio" name="紅色" id="color">
<input type="checkbox" name="藍色" id="color1"><label for="color1">藍色</label>
<input type="checkbox" name="綠色" id="color2"><label for="color2">綠色</label>
<input type="checkbox" name="紫色" id="color3"><label for="color3">紫色</label>
</body>
每一個控件都會有一個label和一個id一一對應
好的，今天就先這樣了
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
