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

這篇文章主要介紹“html5配合css3實(shí)現(xiàn)帶提示文字的輸入框”，在日常操作中，相信很多人在html5配合css3實(shí)現(xiàn)帶提示文字的輸入框問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”html5配合css3實(shí)現(xiàn)帶提示文字的輸入框”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

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

代碼如下:

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

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

代碼如下:

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)畫效果和偽類，我們就可以很容易做出一個(gè)帶動(dòng)畫的輸入框，在系統(tǒng)登錄、搜索等位置很適合。當(dāng)然你要為了兼容IE6，這個(gè)方法是行不通。不過Ie9也支持placeholder標(biāo)簽，就是無法修改它的顏色而已。

到此，關(guān)于“html5配合css3實(shí)現(xiàn)帶提示文字的輸入框”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！