Skip to content

[css] 第97天 如何更改placeholder的字体颜色和大小？ #968

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
haizhilin2013 opened this issue Jul 21, 2019 · 5 comments
Open

[css] 第97天 如何更改placeholder的字体颜色和大小？ #968

haizhilin2013 opened this issue Jul 21, 2019 · 5 comments
Labels
css css

Comments

@haizhilin2013
Copy link
Collaborator

第97天 如何更改placeholder的字体颜色和大小？
@haizhilin2013 haizhilin2013 added the css css label Jul 21, 2019
@NicholasBaiYa
Copy link

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

@nowherebutup
Copy link 

  <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>

@LinStan
Copy link

LinStan commented Jul 22, 2019

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

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

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

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

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

@xxf1996
Copy link

xxf1996 commented Jul 22, 2019

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

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

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

@smile-2008
Copy link

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

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

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

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
css css
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@smile-2008 @haizhilin2013 @xxf1996 @NicholasBaiYa @LinStan @nowherebutup