整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
瀏覽器自帶的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樣式的文章，敬請期待~
通常我們在寫input時，它的背景文字框都是灰色的，樣式很單一，其實它可以做的更好看的，在CSS3中就專門提供了一屬性placeholder來實現輸入框的美化。接下來，就為大家展示下：
HTML：
CSS：
效果：
對于input輸入框的背景提示信息(placeholder)的美化雖然只是對網站應用的小小點綴，但正是這樣細節上的小差別將你的網站和別人的網站區別開來。IE10也支持了placeholder屬性哦！
切版 qieban(.cn)
文章介紹了html標簽里的input標簽和label標簽的美化效果！效果圖如下：
用在復選框中選擇，個性化了復選框的默認樣式，增強用戶體驗！
實現方法也非常簡單
下面看看代碼
html:
css:
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
