作者:小寒风 | 来源:互联网 | 2020-08-18 10:21
本篇文章给大家带来的内容是CSS修改placeholder样式的方法介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。
项目用经常遇到修改input的placeholder的颜色的需求,这里来看一下placeholder如何用css设置:
首先来看一下chrome默认的input样式
(placeholder)
不难发现color
属性只能改变输入值的颜色,placeholder
的颜色没人任何变化。so,如何来改变placeholder
的颜色。
要改变placeholder
的颜色就要使用到伪类::placeholder
(placeholder)
IE解决方案:
首先IE9及以下不支持placeholder。IE10需要用:-ms-input-placeholder
,并且属性需要加上!important
提高优先级。
(placeholder ie11)
之后给出其他浏览器的适配方案
/* - Chrome ≤56,
- Safari 5-10.0
- iOS Safari 4.2-10.2
- Opera 15-43
- Opera Mobile >12
- Android Browser 2.1-4.4.4
- Samsung Internet
- UC Browser for Android
- QQ Browser */
::-webkit-input-placeholder {
color: #ccc;
font-weight: 400;
}
/* Firefox 4-18 */
:-moz-placeholder {
color: #ccc;
font-weight: 400;
}
/* Firefox 19-50 */
::-moz-placeholder {
color: #ccc;
font-weight: 400;
}
/* - Internet Explorer 10–11
- Internet Explorer Mobile 10-11 */
:-ms-input-placeholder {
color: #ccc !important;
font-weight: 400 !important;
}
/* Edge (also supports ::-webkit-input-placeholder) */
::-ms-input-placeholder {
color: #ccc;
font-weight: 400;
}
/* CSS Working Draft */
::placeholder {
color: #ccc;
font-weight: 400;
} 总结:以上就是本篇文的全部内容,希望能对大家的学习有所帮助。
以上就是CSS修改placeholder样式的方法介绍(代码示例)的详细内容,更多请关注 第一PHP社区 其它相关文章!