h5和css3製作提示文字的輸入框

webkit特有的一個css，可以控制裡面的文字樣式，配合css3的動畫效果和偽類，我們就可以很容易做出一個帶動畫的輸入框，在系統登入、搜尋等位置很適合，感興趣的你可以參考下本文或許可以幫助你 我很久沒寫過技術文章了，最近一直在以Webkit作為載體開發系統，當然需要大量使用Html5與CSS3，不僅減少大量的JS還可以保證更流暢。
 
當選取對話方塊後，提示文字變淺色,輸入後消失.這個現在通行的做法是在Input標籤後面增加一個Label。使用JS控制。
HTML5出現後，我們有一個更好的方法。 

程式碼如下:

<input type="text" placeholder="用户名或邮件地址" name="username"/>

我們看到有placeholder標籤，可以當作使用者文字提示。這樣子就非常方便了。但是為了最求完美，我們需要在選取後，將文字變淺，或是修改提示檔案的樣式，我們該怎麼辦？

程式碼如下:

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瀏覽器下才看到完整效果。是不是很方便？

【相關推薦】

1. CSS3免費影片教學

2. 分享幾個常用的最新的css3屬性

3. 用CSS製作聊天框小尖角、氣泡效果

4. 瀏覽器實現行動裝置高效能css3動畫

5. h5+css3實作圖片飛入與淡入淡出效果的程式碼實例

#

以上是h5和css3製作提示文字的輸入框的詳細內容。更多資訊請關注PHP中文網其他相關文章！