首页 > 代码库 > 怎么修改placeholder字体的css样式

怎么修改placeholder字体的css样式

修改palceholder内文字的css样式

1 ::-webkit-input-placeholder{2     color: red;3     font-size: 20px;4     line-height: 50px;5 }

修改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样式