html5配合css3實現帶提示文字的輸入框(擺脫js)_HTML5教程
推薦：程序設計HTML5 Canvas API本文小編為大家介紹關于程序設計程序設計HTML5 Canvas API ，有需求的朋友可以參考一下。
很久沒寫過技術文章了，最近一直在以Webkit作為載體開發系統，當然需要大量使用Html5與CSS3，不僅減少大量的JS還可以保證更流暢。
當選中對話框后，提示文字變淺色,輸入后消失.這個現在通行的做法是在Input標簽后面增加一個Label。使用JS控制。
HTML5出現后，我們有一個更好的方法。
復制代碼 代碼如下:www.ghpqjb.com
<input type="text" placeholder="用戶名或郵件地址" name="username"/>
我們看到有placeholder標簽，可以作為用戶文字提示。這樣子就非常方便了。但是為了最求完美，我們需要在選中后，將文字變淺，或者修改提示文件的樣式，我們該怎么辦？
復制代碼 代碼如下:www.ghpqjb.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之Javascript API擴展5—其他擴展(應用緩存/服務端消息/桌面通知)前面已經總結了主要的API擴展(應用緩存/服務端消息/桌面通知),下面的幾個只有在特定的場合才能發揮它的潛質，無一例外，IE均不支持,桌面通知目前只有Chrome支持,感興趣的朋友可以了解下，或許對你有所幫助
相關HTML5教程：
- 只要五步 就可以用HTML5/CSS3快速制作便簽貼特效(圖)
- 網易微博Web App用HTML5開發的過程介紹
- HTML5 對各個標簽的定義與規定：body的介紹
- 關于HTML5的安全問題開發人員需要牢記的
- 關于HTML5的22個初級技巧(圖文教程)
- 開發人員所需要知道的HTML5性能分析面面觀
- HTML5 Web Database 數據庫的SQL語句的使用方法
- HTML5實踐-圖片設置成灰度圖
- HTML5安全介紹之內容安全策略（CSP）簡介
- HTML5 Web存儲方式的localStorage和sessionStorage進行數據本地存儲案例應用
- Bootstrap 學習分享
- input元素的url類型和email類型簡介
HTML5教程Rss訂閱Div+Css教程搜索
HTML5教程推薦
- html5指南-1.html5全局屬性(html5 global attributes)深入理解
- HTML5是什么 HTML5是什么意思 HTML5簡介
- HTML5本地存儲之Database Storage應用介紹
- html5 桌面提醒：Notifycations應用介紹
- HTML5 Web Database 數據庫的SQL語句的使用方法
- HTML5中實現拖放效果無須借助javascript
- html5 Canvas畫圖教程(9)—canvas中畫出矩形和圓形
- 使用css3 屬性如何豐富圖片樣式(圓角 陰影 漸變)
- 只要五步 就可以用HTML5/CSS3快速制作便簽貼特效(圖)
- 突襲HTML5之Javascript API擴展5—其他擴展(應用緩存/服務端消息/桌面通知)
- 相關鏈接：
- 教程說明：
HTML5教程-html5配合css3實現帶提示文字的輸入框(擺脫js)
。