小編給大家分享一下如何使用html5配合css3實現帶提示文字的輸入框，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

員工經過長期磨合與沉淀，具備了協作精神，得以通過團隊的力量開發(fā)出優(yōu)質的產品。創(chuàng)新互聯堅持“專注、創(chuàng)新、易用”的產品理念，因為“專注所以專業(yè)、創(chuàng)新互聯網站所以易用所以簡單”。公司專注于為企業(yè)提供做網站、成都網站設計、微信公眾號開發(fā)、電商網站開發(fā)，小程序設計，軟件按需定制等一站式互聯網企業(yè)服務。

當選中對話框后，提示文字變淺色,輸入后消失.這個現在通行的做法是在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標簽，就是無法修改它的顏色而已。

以上是“如何使用html5配合css3實現帶提示文字的輸入框”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯行業(yè)資訊頻道！

當前題目：如何使用html5配合css3實現帶提示文字的輸入框
本文URL：http://jinyejixie.com/article32/pdccpc.html

成都網站建設公司_創(chuàng)新互聯，為您提供ChatGPT、服務器托管、網站營銷、網站導航、網站排名、定制網站

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯