html5配合css3實(shí)現(xiàn)帶提示文字的輸入框(擺脫js)_HTML5教程
推薦:程序設(shè)計(jì)HTML5 Canvas API本文小編為大家介紹關(guān)于程序設(shè)計(jì)程序設(shè)計(jì)HTML5 Canvas API ,有需求的朋友可以參考一下。
很久沒寫過技術(shù)文章了,最近一直在以Webkit作為載體開發(fā)系統(tǒng),當(dāng)然需要大量使用Html5與CSS3,不僅減少大量的JS還可以保證更流暢。
當(dāng)選中對(duì)話框后,提示文字變淺色,輸入后消失.這個(gè)現(xiàn)在通行的做法是在Input標(biāo)簽后面增加一個(gè)Label。使用JS控制。
HTML5出現(xiàn)后,我們有一個(gè)更好的方法。
復(fù)制代碼 代碼如下:m.hl5o.cn
<input type="text" placeholder="用戶名或郵件地址" name="username"/>
我們看到有placeholder標(biāo)簽,可以作為用戶文字提示。這樣子就非常方便了。但是為了最求完美,我們需要在選中后,將文字變淺,或者修改提示文件的樣式,我們該怎么辦?
復(fù)制代碼 代碼如下:m.hl5o.cn
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)簽,就是無法修改它的顏色而已。
那么,如果不支持該怎么辦?可以簡單直接使用Jquery幫忙,那么在就不在本文討論范圍了。
給一個(gè)Demo,Demo地址 必須在Webkit瀏覽器下才看到完整效果。是不是很方便?
分享:突襲HTML5之Javascript API擴(kuò)展5—其他擴(kuò)展(應(yīng)用緩存/服務(wù)端消息/桌面通知)前面已經(jīng)總結(jié)了主要的API擴(kuò)展(應(yīng)用緩存/服務(wù)端消息/桌面通知),下面的幾個(gè)只有在特定的場合才能發(fā)揮它的潛質(zhì),無一例外,IE均不支持,桌面通知目前只有Chrome支持,感興趣的朋友可以了解下,或許對(duì)你有所幫助
相關(guān)HTML5教程:
- 只要五步 就可以用HTML5/CSS3快速制作便簽貼特效(圖)
- 網(wǎng)易微博Web App用HTML5開發(fā)的過程介紹
- HTML5 對(duì)各個(gè)標(biāo)簽的定義與規(guī)定:body的介紹
- 關(guān)于HTML5的安全問題開發(fā)人員需要牢記的
- 關(guān)于HTML5的22個(gè)初級(jí)技巧(圖文教程)
- 開發(fā)人員所需要知道的HTML5性能分析面面觀
- HTML5 Web Database 數(shù)據(jù)庫的SQL語句的使用方法
- HTML5實(shí)踐-圖片設(shè)置成灰度圖
- HTML5安全介紹之內(nèi)容安全策略(CSP)簡介
- HTML5 Web存儲(chǔ)方式的localStorage和sessionStorage進(jìn)行數(shù)據(jù)本地存儲(chǔ)案例應(yīng)用
- Bootstrap 學(xué)習(xí)分享
- input元素的url類型和email類型簡介
HTML5教程Rss訂閱Div+Css教程搜索
HTML5教程推薦
- html5指南-1.html5全局屬性(html5 global attributes)深入理解
- HTML5是什么 HTML5是什么意思 HTML5簡介
- HTML5本地存儲(chǔ)之Database Storage應(yīng)用介紹
- html5 桌面提醒:Notifycations應(yīng)用介紹
- HTML5 Web Database 數(shù)據(jù)庫的SQL語句的使用方法
- HTML5中實(shí)現(xiàn)拖放效果無須借助javascript
- html5 Canvas畫圖教程(9)—canvas中畫出矩形和圓形
- 使用css3 屬性如何豐富圖片樣式(圓角 陰影 漸變)
- 只要五步 就可以用HTML5/CSS3快速制作便簽貼特效(圖)
- 突襲HTML5之Javascript API擴(kuò)展5—其他擴(kuò)展(應(yīng)用緩存/服務(wù)端消息/桌面通知)
- 相關(guān)鏈接:
- 教程說明:
HTML5教程-html5配合css3實(shí)現(xiàn)帶提示文字的輸入框(擺脫js)
。