前端开发之修改输入框的placeholder字体颜色大小

CSS/设计
463
0
0
2022-05-02
标签   Css实践

做过网页的朋友对 placeholder 这个属性应该不会陌生,这个是表单输入框的提示信息属性,就像这样:

前端开发之修改输入框的placeholder字体颜色

前端开发之修改输入框的placeholder字体颜色

当输入框为空的时候就显示这个提示语,让用户知道这里要填写什么内容,从上面的图中可以看到,这个提示语默认是灰色,平时我们也不会怎么去设置这个东西,因为默认的色就可以了,不需要再改了,那么如果设计师的创意比较另类,这个提示他换成了别的色,那我们要怎么改呢?其实也不难,这里我为了演示就把这个提示语的字改成红色的,代码如下:

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color#f00;  
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
    color#f00;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color#f00;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color#f00;
}

改完之后显示效果就是这样的:

前端开发之修改输入框的placeholder字体颜色

是不是很简单?只是改成红色的有点丑,大家可以根据自己需要改成适合的色。

谢谢你的阅读,如果你有更好的方法或在应用过程中遇到问题可以在评论区提问或者直接私信我,我会定期回复,码农刘小桥与你一起学习,共同进步。