Fe-interview: [css] 第97天 如何更改placeholder的字体颜色和大小？

Created on 21 Jul 2019  ·  4Comments  ·  Source: haizlin/fe-interview

第97天 如何更改placeholder的字体颜色和大小？

css
Source
picture haizhilin2013

Most helpful comment

  <style>
    /* Chrome浏览器 */
    input::-webkit-input-placeholder {
      color: red;
    }

    /* 火狐浏览器 */
    input::-moz-placeholder {
      color: red;
    }

    /* IE */
    input:-ms-input-placeholder {
      color: red;
    }
  </style>
<body>
  <input type="text" placeholder="你好">
</body>
picture nowherebutup on 22 Jul 2019
👍9

All 4 comments

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #909;
font-size: 22px
}

NicholasBaiYa picture NicholasBaiYa on 22 Jul 2019 
  <style>
    /* Chrome浏览器 */
    input::-webkit-input-placeholder {
      color: red;
    }

    /* 火狐浏览器 */
    input::-moz-placeholder {
      color: red;
    }

    /* IE */
    input:-ms-input-placeholder {
      color: red;
    }
  </style>
<body>
  <input type="text" placeholder="你好">
</body>
nowherebutup picture nowherebutup on 22 Jul 2019
👍9

通过每个浏览器不同的属性设置

/*chrome*/
::-webkit-input-placeholder{
font-size:15px;
color:red;
}

/*firefox*/
::-moz-placeholder
{
color:green
}

/*IE*/
::ms-input-placeholder
{
color:black
}

冒号前面加包含input框对应的选择器即可

LinStan picture LinStan on 22 Jul 2019

可以通过各个浏览器的特定伪元素或伪类来设置placeholder的样式：

  • chrome：::-webkit-input-placeholder
  • firefox：::-moz-placeholder
  • IE：:-ms-input-placeholder

参考文档：伪元素表单控件默认样式重置与自定义大全 « 张鑫旭-鑫空间-鑫生活

xxf1996 picture xxf1996 on 22 Jul 2019
👍5
Was this page helpful?
0 / 5 - 0 ratings

Related issues

haizhilin2013 picture haizhilin2013  ·  3Comments
haizhilin2013 picture haizhilin2013  ·  3Comments
haizhilin2013 picture haizhilin2013  ·  3Comments
haizhilin2013 picture haizhilin2013  ·  3Comments
haizhilin2013 picture haizhilin2013  ·  3Comments