html5配合css3實現(xiàn)帶提示文字的輸入框(擺脫js)
發(fā)布時間：2013-03-08 11:41:53 作者：佚名 
我要評論
我要評論webkit特有的一個css，可以控制里面的文字樣式，配合css3的動畫效果和偽類，我們就可以很容易做出一個帶動畫的輸入框，在系統(tǒng)登錄、搜索等位置很適合，感興趣的你可以參考下本文或許可以幫助到你
很久沒寫過技術(shù)文章了，最近一直在以Webkit作為載體開發(fā)系統(tǒng)，當(dāng)然需要大量使用Html5與CSS3，不僅減少大量的JS還可以保證更流暢。
當(dāng)選中對話框后，提示文字變淺色,輸入后消失.這個現(xiàn)在通行的做法是在Input標(biāo)簽后面增加一個Label。使用JS控制。
HTML5出現(xiàn)后，我們有一個更好的方法。
<input type="text" placeholder="用戶名或郵件地址" name="username"/>
我們看到有placeholder標(biāo)簽，可以作為用戶文字提示。這樣子就非常方便了。但是為了最求完美，我們需要在選中后，將文字變淺，或者修改提示文件的樣式，我們該怎么辦？
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的動畫效果和偽類，我們就可以很容易做出一個帶動畫的輸入框，在系統(tǒng)登錄、搜索等位置很適合。當(dāng)然你要為了兼容IE6，這個方法是行不通。不過Ie9也支持placeholder標(biāo)簽，就是無法修改它的顏色而已。
那么，如果不支持該怎么辦？可以簡單直接使用Jquery幫忙，那么在就不在本文討論范圍了。
給一個Demo，Demo地址 必須在Webkit瀏覽器下才看到完整效果。是不是很方便？
當(dāng)選中對話框后，提示文字變淺色,輸入后消失.這個現(xiàn)在通行的做法是在Input標(biāo)簽后面增加一個Label。使用JS控制。
HTML5出現(xiàn)后，我們有一個更好的方法。
復(fù)制代碼
代碼如下:<input type="text" placeholder="用戶名或郵件地址" name="username"/>
我們看到有placeholder標(biāo)簽，可以作為用戶文字提示。這樣子就非常方便了。但是為了最求完美，我們需要在選中后，將文字變淺，或者修改提示文件的樣式，我們該怎么辦？
復(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特有的一個css，可以控制里面的文字樣式，配合css3的動畫效果和偽類，我們就可以很容易做出一個帶動畫的輸入框，在系統(tǒng)登錄、搜索等位置很適合。當(dāng)然你要為了兼容IE6，這個方法是行不通。不過Ie9也支持placeholder標(biāo)簽，就是無法修改它的顏色而已。
那么，如果不支持該怎么辦？可以簡單直接使用Jquery幫忙，那么在就不在本文討論范圍了。
給一個Demo，Demo地址 必須在Webkit瀏覽器下才看到完整效果。是不是很方便？
相關(guān)文章
html5實現(xiàn)輸入框字?jǐn)?shù)限制提示抖動效果
html5實現(xiàn)輸入框字?jǐn)?shù)限制提示抖動效果，效果圖為藍(lán)色背景，輸入文字時并伴有橫條加載效果，當(dāng)超過限制字符時，輸入框抖動效果代碼。本段代碼可以在各個網(wǎng)頁使用，有需要的2018-03-01Html5新標(biāo)簽datalist實現(xiàn)輸入框與后臺數(shù)據(jù)庫數(shù)據(jù)的動態(tài)匹配
HTML5新增的標(biāo)簽datalist實現(xiàn)輸入中文/拼音首字母時，自動進入數(shù)據(jù)庫模糊查詢，并返回相應(yīng)的結(jié)果，生成datalist，由于在輸入框中的輸入內(nèi)容發(fā)生變化時，datalist會自動觸發(fā)2017-05-18- 本文主要介紹了HTML5 虛擬鍵盤出現(xiàn)擋住輸入框的解決辦法。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-14
- 本文給大家介紹如何使用html5為輸入框添加語音輸入功能，實現(xiàn)方法很簡單，需要的朋友參考下本文2017-02-06
詳解移動端HTML5頁面端去掉input輸入框的白色背景和邊框（兼容Android
本篇文章主要介紹了移動端HTML5頁面端去掉input輸入框的白色背景和邊框，非常具有實用價值，需要的朋友可以參考下。2016-12-15
HTML5去掉輸入框type為number時的上下箭頭的實現(xiàn)方法
這篇文章主要介紹了HTML5去掉輸入框type為number時的上下箭頭的實現(xiàn)方法,需要的朋友可以參考下2020-01-03
