前端学习总结101天：CSS——设置placeholder文本样式

Posted 2020-11-26 jlfw

随便叨叨

今天是我前端学习之路的第101天，决定从微信公众号搬家到segmentfault码字。

学习总结

1、用以下代码可以控制placeholder的文字样式。

::-webkit-input-placeholder { /* Webkit browsers*/
    color: red;
}

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

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

:-ms-input-placeholder { /* Internet Explorer 10+ */ 
    color: red;
}

2、若想要具体控制某一类标签，：：前面加上标签名时不要有空格。

input::-webkit-input-placeholder {
    color: red;
} 

3、若想要用类名、ID名控制，：：前面加上类名、ID名时要有空格。

.test ::-webkit-input-placeholder {
    color: red;
}

#test ::-webkit-input-placeholder {
    color: red;
}

4、还可以同时设置多个选择器

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: red;
}