言

瀏覽器自帶的input標(biāo)簽，例如text,radio,checkbox的樣式都顯得很難看，雖然已經(jīng)有類似于Bootstrap這種穩(wěn)定的類庫可以使用，但是對于定制化的input樣式同樣難以滿足，今天我們就自己動(dòng)手，一起來看看如何使用CSS3實(shí)現(xiàn)一個(gè)好看的input樣式。

CSS3

如果感興趣的，可以去github上去看源碼進(jìn)行學(xué)習(xí)，地址如下：

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

input-text

首先我們來看下type為text的文本框元素，實(shí)現(xiàn)的動(dòng)態(tài)效果如下圖所示。

效果圖

實(shí)現(xiàn)過程

接下來我們來看看這樣的效果是如何實(shí)現(xiàn)的。頁面上的元素主要是以下幾個(gè)部分。

1. input元素，將其border設(shè)置為none

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

3. div元素，實(shí)際為下面的橫線

我們需要達(dá)到的效果是，在未點(diǎn)擊input元素時(shí)，通過label元素顯示提示信息；在input元素獲得焦點(diǎn)后label元素會(huì)移動(dòng)到input元素上面，并且顯示出動(dòng)態(tài)的獲取焦點(diǎn)的過程，此后可以在input元素中正常輸入信息。

代碼組成

首先我們來看看HTML部分的代碼。

HTML代碼

通過html部分代碼，可以看出頁面主要由input，label，div三個(gè)元素構(gòu)成。

然后我們再來看看CSS部分的代碼，由于CSS部分代碼比較多，我們拆開來看。

先看最外層的容器樣式代碼如下。

外層容器

然后是input標(biāo)簽的樣式，在CSS3中提供了placehoder的樣式，在這里為了防止placeholder屬性會(huì)覆蓋到label標(biāo)簽，我們將其透明度設(shè)置為0。關(guān)于input元素以及其placeholder屬性值的css樣式部分如下所示。

input樣式

緊接著是下面的label標(biāo)簽的樣式，因?yàn)樵趇nput獲取焦點(diǎn)時(shí)，label元素會(huì)移動(dòng)到input上方，因此需要給label元素加上一個(gè)動(dòng)畫效果。label部分代碼如下所示。

label部分代碼

其次是最下面的一條橫線，在input元素未獲取焦點(diǎn)的狀態(tài)下，其長度為0。

橫線

最后是在input獲取焦點(diǎn)后的樣式變化，下面的橫線會(huì)逐漸延長至最大寬度，而且具有不同的顏色，這一動(dòng)態(tài)效果由下面的代碼決定。

獲取焦點(diǎn)動(dòng)態(tài)效果

至此，頁面上所有的代碼均已完成，在瀏覽器中運(yùn)行頁面后會(huì)看到文章開始時(shí)的效果。

結(jié)束

在萬千已經(jīng)成型的前端框架中，自己寫出一個(gè)樣式也算是一種收獲，在后面的文章中，我會(huì)繼續(xù)寫關(guān)于如何實(shí)現(xiàn)checkbox和radio樣式的文章，敬請期待~

通常我們在寫input時(shí)，它的背景文字框都是灰色的，樣式很單一，其實(shí)它可以做的更好看的，在CSS3中就專門提供了一屬性placeholder來實(shí)現(xiàn)輸入框的美化。接下來，就為大家展示下：

HTML：

CSS：

效果：

對于input輸入框的背景提示信息(placeholder)的美化雖然只是對網(wǎng)站應(yīng)用的小小點(diǎn)綴，但正是這樣細(xì)節(jié)上的小差別將你的網(wǎng)站和別人的網(wǎng)站區(qū)別開來。IE10也支持了placeholder屬性哦！

切版 qieban(.cn)

文章介紹了html標(biāo)簽里的input標(biāo)簽和label標(biāo)簽的美化效果！效果圖如下：

用在復(fù)選框中選擇，個(gè)性化了復(fù)選框的默認(rèn)樣式，增強(qiáng)用戶體驗(yàn)！

實(shí)現(xiàn)方法也非常簡單

下面看看代碼

html:

css: