本文摘自PHP中文网,作者青灯夜游,侵删。
本篇文章给大家带来的内容是CSS修改placeholder样式的方法介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。项目用经常遇到修改input的placeholder的颜色的需求,这里来看一下placeholder如何用css设置:
首先来看一下chrome默认的input样式
1 |
|
(placeholder)
(input style)
可以发现,placeholder
和input
的默认颜色是有点区别的。现在我们来修改input
的颜色
1 |
|
(placeholder)
(input)
不难发现color
属性只能改变输入值的颜色,placeholder
的颜色没人任何变化。so,如何来改变placeholder
的颜色。
要改变placeholder
的颜色就要使用到伪类::placeholder
1 2 3 4 5 6 |
|
(placeholder)
(input)
需要注意的是::palceholder
伪类的兼容性,以上是在chrome浏览器的运行结果,同样的代码在IE11中就成了这样
(placeholder - ie11)
(input - ie11)
IE解决方案:
首先IE9及以下不支持placeholder。IE10需要用:-ms-input-placeholder
,并且属性需要加上!important
提高优先级。
1 2 3 4 5 6 |
|
(placeholder ie11)
(input ie11)
相关阅读 >>
更多相关阅读请进入《css》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者