位置：广州松河 > 技术支持 > 修改输入框placeholder文字默认颜色-webkit-input-placeholder_CSS学习

修改输入框placeholder文字默认颜色-webkit-input-placeholder_CSS学习

来源：网络整理时间：2023/3/4 0:56:53 共 3630 浏览

在input、textarea等标签中可能需要用到placeholder，默认是灰色的，但如果输入框有复杂的配色，这时候可能就会对默认提示文字placeholder进行颜色设置，所以本文就是来分享如何修改placeholder文字默认颜色的：

先看案例：

input{color: blue;}//输入文字为蓝色
/**/
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #f35; opacity:1; 
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #f35;opacity:1;
}
input:-ms-input-placeholder{
    color: #f35;opacity:1;
}
input::-webkit-input-placeholder{
    color: #f35;
}
</style>
<input class="inputText" id="id_card" name="id_card" placeholder="placeholder文字默认颜色" type="text">

使用中，请注意浏览器兼容！

在html5中input，textarea等元素新添加了placeholder的属性，我们可以通过css设置placeholder的样式，对于ie，firefox，以及webkit内核的浏览器需要使用不同的样式写法。

案例2：

<style>
input:-moz-placeholder,
textarea:-moz-placeholder {
    color: #f35;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: #f35;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #f35;
}
/**/
</style>
<input type="text" placeholder="搜索" value="">

版权说明：
本网站凡注明“广州松河原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：css :after伪类+content使用说明和方法_CSS学习 | ·下一条：onkeydown - 事件会在用户按下一个键盘按键时发生。_js/jQuery