怎么修改placeholder字体的css样式

时间：2022-09-30 22:38:56

修改palceholder内文字的css样式

 ::-webkit-input-placeholder{

     color: red;

     font-size: 20px;

     line-height: 50px;

 }

修改class名为test1的元素palceholder内文字css样式

.test1::-webkit-input-placeholder{

    color: red;

    font-size: 20px;

    line-height: 50px;

}

例子：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            input{

                height: 50px;

                font-size: 14px;

                line-height: 50px;

            }

            .test1::-webkit-input-placeholder{

                color: red;

                font-size: 20px;

                line-height: 50px;

            }

        </style>

    </head>

    <body>

        <input class="test1" type="text" placeholder="测试" />

        <input type="text" placeholder="测试" />

    </body>

</html>

效果图：

怎么修改placeholder字体的css样式

至于兼容，加上相应浏览器的前缀

相关文章