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

William_Sang 發布于2019-08-30 11:11 / 2829人閱讀

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

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

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

用法

HTML

CSS

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

結果

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

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云服務器云服務器自定義按鈕樣式 h5視頻播放器可自定義樣式自定義鏡像的使用請教自定義控件的問題

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114828.html

轉：CSS :placeholder-shown偽類實現Material Design占位符交互效果

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

gaara 2019-08-30 15:44 評論0 收藏0
CSS :placeholder-shown偽類實現輸入框浮動文字效果

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

arashicage 2019-08-30 11:09 評論0 收藏0
CSS :placeholder-shown偽類實現輸入框浮動文字效果

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

junbaor 2019-08-02 15:17 評論0 收藏0
CSS :placeholder-shown偽類實現輸入框浮動文字效果

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

MingjunYang 2019-08-23 18:04 評論0 收藏0
《DOM編程藝術》中初步實現的圖片庫的總結（一）

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

Yi_Zhi_Yu 2019-08-19 18:31 評論0 收藏0