自定義占位文本(placeholder)的樣式

William_Sang 發(fā)布于2019-08-30 11:11 / 2923人閱讀

摘要：自定義占位文本的樣式當(dāng)我們對(duì)元素或者元素寫樣式的時(shí)候如果需要自定義占位文本也就是的樣式的時(shí)候怎么辦有一個(gè)偽元素選擇器可以解決我們的問題用法我是紅色的結(jié)果但要注意這個(gè)偽元素選擇器是一個(gè)實(shí)驗(yàn)性的特性還需要一些時(shí)日待瀏覽器兼容因此我們要添加一

自定義占位文本(placeholder)的樣式

當(dāng)我們對(duì)input元素或者textarea元素寫CSS樣式的時(shí)候, 如果需要自定義占位文本(也就是placeholder)的樣式的時(shí)候怎么辦?
CSS有一個(gè)偽元素選擇器::placeholder可以解決我們的問題.

用法

HTML

CSS

input::placeholder {
  color: red;
  font-size: 1.2em;
  font-style: italic;
}

結(jié)果

但要注意, 這個(gè)偽元素選擇器是一個(gè)實(shí)驗(yàn)性的特性, 還需要一些時(shí)日待瀏覽器兼容.
因此, 我們要添加一些前綴來使用它, 如下所示.

input::-webkit-input-placeholder {
    color: #999;
}
/* IE10+ */
input:-ms-input-placeholder {
    color: #999;
}
/* Firefox4-18 */
input:-moz-placeholder {
    color: #999;
}
/* Firefox19+ */
input::-moz-placeholder {
    color: #999;
}
input::placeholder {
  color: #999;
}

textarea::-webkit-input-placeholder {
    color: #999;
}
/* IE10+ */
textarea:-ms-input-placeholder {
    color: #999;
}
/* Firefox4-18 */
textarea:-moz-placeholder {
    color: #999;
}
/* Firefox19+ */
textarea::-moz-placeholder {
    color: #999;
}
textarea::placeholder {
  color: #999;
}

參考鏈接:
MDN - ::placeholder
Can I Use - ::placeholder

GPU云服務(wù)器云服務(wù)器自定義按鈕樣式 h5視頻播放器可自定義樣式自定義鏡像的使用請(qǐng)教自定義控件的問題

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/114828.html

相關(guān)文章

轉(zhuǎn)：CSS :placeholder-shown偽類實(shí)現(xiàn)Material Design占位符交互效果

摘要：轉(zhuǎn)自偽類實(shí)現(xiàn)占位符交互效果一規(guī)范中占位符交互效果風(fēng)格占位符交互效果官方示意見此頁面。我們可以采用絕對(duì)定位最后，對(duì)這個(gè)元素在輸入框時(shí)候，以及非顯示的時(shí)候進(jìn)行重定位縮小并位移到上方四清除按鈕部分上是必要屬性，配合偽類實(shí)現(xiàn)我們的效果。轉(zhuǎn)自： https://github.com/yougola/bl... CSS :placeholder-shown偽類實(shí)現(xiàn)Material Design占...

gaara 2019-08-30 15:44 評(píng)論0 收藏0
CSS :placeholder-shown偽類實(shí)現(xiàn)輸入框浮動(dòng)文字效果

摘要：輸入框的屬性允許您指定沒有輸入內(nèi)容時(shí)出現(xiàn)在元素內(nèi)的文本。當(dāng)輸入框被激活并開始輸入內(nèi)容時(shí)，元素會(huì)浮動(dòng)顯示在輸入框的上方。純實(shí)現(xiàn)浮動(dòng)的標(biāo)簽文字注冊事件，判斷是否輸入有值，隱藏一個(gè)元素，并根據(jù)輸入框是否有內(nèi)容來決定是否顯示這個(gè)元素。在這篇文章中，我們將使用:placeholder-shown偽類創(chuàng)建一個(gè)浮動(dòng)的問題標(biāo)簽效果，使用純CSS實(shí)現(xiàn)。 showImg(https://segmentf...

arashicage 2019-08-30 11:09 評(píng)論0 收藏0
CSS :placeholder-shown偽類實(shí)現(xiàn)輸入框浮動(dòng)文字效果

摘要：輸入框的屬性允許您指定沒有輸入內(nèi)容時(shí)出現(xiàn)在元素內(nèi)的文本。當(dāng)輸入框被激活并開始輸入內(nèi)容時(shí)，元素會(huì)浮動(dòng)顯示在輸入框的上方。純實(shí)現(xiàn)浮動(dòng)的標(biāo)簽文字注冊事件，判斷是否輸入有值，隱藏一個(gè)元素，并根據(jù)輸入框是否有內(nèi)容來決定是否顯示這個(gè)元素。在這篇文章中，我們將使用:placeholder-shown偽類創(chuàng)建一個(gè)浮動(dòng)的問題標(biāo)簽效果，使用純CSS實(shí)現(xiàn)。 showImg(https://segmentf...

junbaor 2019-08-02 15:17 評(píng)論0 收藏0
CSS :placeholder-shown偽類實(shí)現(xiàn)輸入框浮動(dòng)文字效果

摘要：輸入框的屬性允許您指定沒有輸入內(nèi)容時(shí)出現(xiàn)在元素內(nèi)的文本。當(dāng)輸入框被激活并開始輸入內(nèi)容時(shí)，元素會(huì)浮動(dòng)顯示在輸入框的上方。純實(shí)現(xiàn)浮動(dòng)的標(biāo)簽文字注冊事件，判斷是否輸入有值，隱藏一個(gè)元素，并根據(jù)輸入框是否有內(nèi)容來決定是否顯示這個(gè)元素。在這篇文章中，我們將使用:placeholder-shown偽類創(chuàng)建一個(gè)浮動(dòng)的問題標(biāo)簽效果，使用純CSS實(shí)現(xiàn)。 showImg(https://segmentf...

MingjunYang 2019-08-23 18:04 評(píng)論0 收藏0
《DOM編程藝術(shù)》中初步實(shí)現(xiàn)的圖片庫的總結(jié)（一）

摘要：灰姑娘灰姑娘灰姑娘不足點(diǎn)擊事件綁定在代碼中，很笨重，下一篇中將做升級(jí)。前言：在《DOM編程藝術(shù)》一書中，作者給出了一個(gè)實(shí)例：創(chuàng)建一個(gè)圖片庫，其實(shí)功能很簡單，就是點(diǎn)擊某個(gè)列表項(xiàng)時(shí)，下方出現(xiàn)相應(yīng)的圖片以及圖片說明（圖片說明事先以title的形式寫在HTML中），雖然是一個(gè)簡單的例子，當(dāng)時(shí)作者在書中循序漸進(jìn)，不斷的改善圖片庫中間引入各種知識(shí)點(diǎn)，真的是一本好書，在此對(duì)這個(gè)實(shí)例進(jìn)行一些總結(jié)。 ...

Yi_Zhi_Yu 2019-08-19 18:31 評(píng)論0 收藏0