css自定義占位文本(placeholder)的樣式的方法示例

  發布時間:2019-06-18 16:16:32   作者:零下一度   我要評論

這篇文章主要介紹了css自定義占位文本(placeholder)的樣式的方法示例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

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

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

用法

HTML

<input placeholder="我是紅色的!">

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

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關文章

  • DW插入圖像/圖像占位符和互動圖像的實例教程

    DW中如何插入圖像、圖像占位符和互動圖像?在制作網頁的時候經常需要插入圖片等,今天我們就來以實例為教程,給大家講述DW插入圖像/圖像占位符和互動圖像的方法,需要的朋
    2016-02-24
  • HTML5注冊表單的自動聚焦與占位文本示例代碼

    想必大家一對HTML5的自動聚焦與占位文本有所了解了吧,要使用HTML5的自動聚焦功能,只需要在表單域中添加autofocus屬性即可,首先看下面要使用HTML自動聚焦和占位文本的示
    2013-07-19

最新評論

湖北11选5走势图爱彩乐