这篇文章主要介绍CSS修改placeholder样式的方法是什么，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
项目用经常遇到修改input的placeholder的颜色的需求，这里来看一下placeholder如何用css设置:
首先来看一下chrome默认的input样式
计算
安全
数据库
网络和加速
企业服务
<input type="text" placeholder="hello world">(placeholder)
(input style)
可以发现，placeholder和input的默认颜色是有点区别的。现在我们来修改input 的颜色
<input type="text" placeholder="hello world" style="color: red">(placeholder)
(input)
不难发现color属性只能改变输入值的颜色，placeholder的颜色没人任何变化。so，如何来改变placeholder的颜色。
要改变placeholder的颜色就要使用到伪类::placeholder
<style>
input::placeholder {
color: green;
}
</style>
<input type="text" placeholder="hello world" style="color: red;">(placeholder)
(input)
需要注意的是::palceholder伪类的兼容性，以上是在chrome浏览器的运行结果，同样的代码在IE11中就成了这样
(placeholder - ie11)
(input - ie11)
IE解决方案:
首先IE9及以下不支持placeholder。IE10需要用:-ms-input-placeholder,并且属性需要加上!important提高优先级。
<style>
input:-ms-input-placeholder {
color: green !important;
}
</style>
<input type="text" placeholder="hello world" style="color: red;">(placeholder ie11)
(input 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样式的方法是什么的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
