首頁 > web前端 > H5教程 > html5配合css3實作帶有提示文字的輸入框(擺脫js)_html5教學技巧

html5配合css3實作帶有提示文字的輸入框(擺脫js)_html5教學技巧

WBOY
發布: 2016-05-16 15:49:43
原創
1331 人瀏覽過

我很久沒寫過技術文章了,最近一直以Webkit作為載體開發系統,當然需要大量使用Html5與CSS3,不僅減少大量的JS還可以保證更流暢。
 
當勾選對話方塊後,提示文字變淺色,輸入後消失.這個現在通行的做法是在Input標籤後面增加一個Label。使用JS控制。
HTML5出現後,我們有一個更好的方法。

複製程式碼
程式碼如下:



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

複製程式碼
程式碼如下:

input::-webkit-input-placeer {
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瀏覽器下才看到完整效果。是不是很方便?
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板