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

2024-08-26 00:14:51

字體：大中小

來源：轉載

供稿：網友

很久沒寫過技術文章了，最近一直在以Webkit作為載體開發系統，當然需要大量使用Html5與CSS3，不僅減少大量的JS還可以保證更流暢。

當選中對話框后，提示文字變淺色,輸入后消失.這個現在通行的做法是在Input標簽后面增加一個Label。使用JS控制。
HTML5出現后，我們有一個更好的方法。

復制代碼代碼如下:www.CuoXIn.com

我們看到有placeholder標簽，可以作為用戶文字提示。這樣子就非常方便了。但是為了最求完美，我們需要在選中后，將文字變淺，或者修改提示文件的樣式，我們該怎么辦？

復制代碼代碼如下:www.CuoXIn.com

 
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特有的一個css，可以控制里面的文字樣式，配合css3的動畫效果和偽類，我們就可以很容易做出一個帶動畫的輸入框，在系統登錄、搜索等位置很適合。當然你要為了兼容IE6，這個方法是行不通。不過Ie9也支持placeholder標簽，就是無法修改它的顏色而已。
那么，如果不支持該怎么辦？可以簡單直接使用Jquery幫忙，那么在就不在本文討論范圍了。
給一個Demo，Demo地址必須在Webkit瀏覽器下才看到完整效果。是不是很方便？

上一篇：程序設計HTML5 Canvas API

下一篇：突襲HTML5之Javascript API擴展4―拖拽(Drag/Drop)概述