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插入图像/图像占位符和互动图像的方法,需要的朋2016-02-24
- 想必大家一对HTML5的自动聚焦与占位文本有所了解了吧,要使用HTML5的自动聚焦功能,只需要在表单域中添加autofocus属性即可,首先看下面要使用HTML自动聚焦和占位文本的示2013-07-19
最新评论