DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5詳解 >> html5配合css3實現帶提示文字的輸入框(擺脫js)
html5配合css3實現帶提示文字的輸入框(擺脫js)
編輯:HTML5詳解     
很久沒寫過技術文章了,最近一直在以Webkit作為載體開發系統,當然需要大量使用Html5與CSS3,不僅減少大量的JS還可以保證更流暢。 
 
當選中對話框後,提示文字變淺色,輸入後消失.這個現在通行的做法是在Input標簽後面增加一個Label。使用JS控制。 
HTML5出現後,我們有一個更好的方法。 

復制代碼代碼如下:www.mb5u.com
<input type="text" placeholder="用戶名或郵件地址" name="username"/>

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

復制代碼代碼如下:www.mb5u.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浏覽器下才看到完整效果。是不是很方便? 
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved