html5配合css3實(shí)現(xiàn)帶提示文字的輸入框(擺脫js)

發(fā)布時(shí)間：2013-03-08 11:41:53 作者：佚名

webkit特有的一個(gè)css，可以控制里面的文字樣式，配合css3的動(dòng)畫(huà)效果和偽類(lèi)，我們就可以很容易做出一個(gè)帶動(dòng)畫(huà)的輸入框，在系統(tǒng)登錄、搜索等位置很適合，感興趣的你可以參考下本文或許可以幫助到你

很久沒(méi)寫(xiě)過(guò)技術(shù)文章了，最近一直在以Webkit作為載體開(kāi)發(fā)系統(tǒng)，當(dāng)然需要大量使用Html5與CSS3，不僅減少大量的JS還可以保證更流暢。

當(dāng)選中對(duì)話框后，提示文字變淺色,輸入后消失.這個(gè)現(xiàn)在通行的做法是在Input標(biāo)簽后面增加一個(gè)Label。使用JS控制。
HTML5出現(xiàn)后，我們有一個(gè)更好的方法。

復(fù)制代碼

代碼如下:

我們看到有placeholder標(biāo)簽，可以作為用戶文字提示。這樣子就非常方便了。但是為了最求完美，我們需要在選中后，將文字變淺，或者修改提示文件的樣式，我們?cè)撛趺崔k？

復(fù)制代碼

代碼如下:

input::-webkit-input-placeholder {
color: #999;
-webkit-transition: color.5s;
}
input:focus::-webkit-input-placeholder, input:hover::-webkit-input-placeholder {
color: #c2c2c2;
-webkit-transition: color.5s;
}

-webkit-input-placeholder，webkit特有的一個(gè)css，可以控制里面的文字樣式，配合css3的動(dòng)畫(huà)效果和偽類(lèi)，我們就可以很容易做出一個(gè)帶動(dòng)畫(huà)的輸入框，在系統(tǒng)登錄、搜索等位置很適合。當(dāng)然你要為了兼容IE6，這個(gè)方法是行不通。不過(guò)Ie9也支持placeholder標(biāo)簽，就是無(wú)法修改它的顏色而已。
那么，如果不支持該怎么辦？可以簡(jiǎn)單直接使用Jquery幫忙，那么在就不在本文討論范圍了。
給一個(gè)Demo，Demo地址必須在Webkit瀏覽器下才看到完整效果。是不是很方便？