修改placeholder属性中文字颜色

修改placeholder的字体颜色

<style>
        input::-webkit-input-placeholder {
            color: red;
        }

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

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

        input:-ms-input-placeholder {
            /* Internet Explorer 10-11 */
            color: red;
        }
</style>

<input type="text" placeholder="看看你会不会变颜色" />

文档链接

Web 开发技术文档链接地址

官方解释 :

-moz-placeholder 等伪类控制元素所显示的文字占位符文字占位符. 它允许开发者/设计师改变文字占位符样式. 默认的文字占位符颜色为浅灰色,当你的表单背景色为类似的颜色时它可能效果并不是很明显,那么你就可以使用这个伪类来改变文字占位符的颜色.<mark style="box-sizing: border-box;">也可以写入其他的字体大小等样式修改。</mark>

注意事项：

1、WebKit, Blink,Edge浏览器等需要带上-webkit-前缀，且是双冒号，写的时候还要带上input 　　2、针对火狐浏览器则有两种写法，一种是针对低版本的，一种是针对高版本的，二者都需要带上-moz-前缀。要点1：火狐低版本的使用冒号（：），而高版本的使用双冒号（：：）；要点2：火狐浏览器不需要像webkit内核那样要带上input。 　　3、由于placeholder属性只在IE10+才支持，因此，针对IE10、IE11的写法是加上-ms-前缀，使用的是冒号（：），需要带上input