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

最新评论