CSS3占位符偽元素淺析_建站經(jīng)驗教程
推薦:選擇軟文發(fā)布機構(gòu)需謹慎軟文發(fā)布行業(yè)現(xiàn)在出現(xiàn)白熱化的競爭階段,各種類型的網(wǎng)站都打著軟文營銷的旗號,有的是文章型軟文網(wǎng)站,有的是公司型網(wǎng)站,有的是介紹型網(wǎng)站,有的是論壇型網(wǎng)站,有的是交易型平臺網(wǎng)站,不管是哪一種軟文類網(wǎng)站,都有軟文發(fā)布的業(yè)務(wù)。詳情請參閱:_________ 作
HTML5的特性曾經(jīng)充斥著各種互聯(lián)網(wǎng)社區(qū),現(xiàn)在,它的特性越來越多的被各種瀏覽器所支持 ,我們可以使用它的更多的功能,如自定義文本的外觀
::input-placeholder CSS偽元素,無論輸入什么字段,該元素都為我們提供了一個符合設(shè)計標準的占位符文本的樣式。

占位符文本的樣式
瀏覽器預定義的樣式,可以通過占位符屬性顯示文本。默認情況下,文本是一個淺灰色的,這種情況下難以閱讀。當開發(fā)人員發(fā)現(xiàn),沒有任何CSS樣式選項可用于占位符之后。 我們發(fā)現(xiàn)::input-placeholder偽元素,可以讓我們擺脫UA規(guī)范,提供更多的造型靈活性。
例如,讓我們使用下面的占位符,并改變其顏色和文字:
<input type="text" placehold
er="I'm placeholder text!">
然后,我們將使用新的偽元素創(chuàng)建一個CSS規(guī)則:
input::-webkit-input-placeholder {
color: rgba(0,5,143,.5);
text-transform: uppercase;
}
單獨定義選擇器(否則將被忽略整個規(guī)則的瀏覽器)
input::-webkit-input-placeholder {
color: rgba(0,5,143,.5);
text-transform: uppercase;
}
input::-moz-placeholder {
color: rgba(0,5,143,.5);
text-transform: uppercase;
}
input:-moz-placeholder { /* Older versions of Firefox */
color: rgba(0,5,143,.5);
text-transform: uppercase;
}
input:-ms-input-placeholder {
color: rgba(0,5,143,.5);
text-transform: uppercase;
}
占位符屬性選擇器
是否要有一個占位符屬性的[placeholder]選擇器,完全是由輸入字段決定的:
input[placeholder] {
font-weight: bold;
border-color: blue;
}
現(xiàn)在,每一個輸入字段,就有一個占位符屬性將變成字體粗細和藍色的邊框。
我們可以使用哪些屬性?
并非所有的CSS屬性都支持::input-placeholder規(guī)則。 事實上,只有極少數(shù)的CSS熟悉才支持,其中最有用的如:
color
font-size
font-style
font-weight
letter-spacing
line-height
padding
text-align
text-decoration
重要的是,占位符樣式并不會影響它的盒子模型。
瀏覽器支持
目前支持::input-placeholder偽元素的瀏覽器有 Firefox 4+, Chrome 4+, Safari 5+, Opera 11.6 and IE10.。 從上文的分析我們可以知道即使這樣小的增強功能幫助我們做出了長足的進步,繼而產(chǎn)生良好的用戶體驗。
(本文出自汪子臻用戶研究與體驗設(shè)計中心http://wangzizhen.com/,轉(zhuǎn)載時請注明出處)
分享:EDM營銷利器新解讀在網(wǎng)民以往的觀念里面,EDM就是郵件群發(fā)。因為現(xiàn)在鋪天蓋地都是廣告的信息,所以EDM營銷就成為了群發(fā)騷擾的代名詞。很多人在收到郵件的時候,直接進行刪除,甚至會把發(fā)送郵件的郵箱進行屏蔽掉,所以EDM營銷的效果很差,慢慢的就會被營銷人員遺忘。但是一旦掌握好其中的
- 相關(guān)鏈接:
- 教程說明:
建站經(jīng)驗教程-CSS3占位符偽元素淺析
。