前言

瀏覽器自帶的input標籤，例如text,radio,checkbox的樣式都顯得很難看，雖然已經有類似於Bootstrap這種穩定的類庫可以使用，但是對於定製化的input樣式同樣難以滿足，今天我們就自己動手，一起來看看如何使用CSS3實現一個好看的input樣式。

CSS3

如果感興趣的，可以去github上去看源碼進行學習，地址如下：

https://github.com/zhouxiongking/article-pages/tree/master/articles/beautifulInput

input-text

首先我們來看下type為text的文本框元素，實現的動態效果如下圖所示。

效果圖

實現過程

接下來我們來看看這樣的效果是如何實現的。頁面上的元素主要是以下幾個部分。

1. input元素，將其border設置為none

2. label元素，與input元素綁定

3. 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樣式的文章，敬請期待~