花美男为中国互联网事业而奋斗

Change an HTML5 input's placeholder color with CSS

来源:未知 阅读(0)次 评论(0)

The ::placeholder pseudo element (or a pseudo class, in some cases, depending on the browser implementation) allows you to style the placeholder text of a form element. As in, the text set with the placeholder attribute:


You can style that text across most browsers with this smattering of vendor-prefixed selectors:

/* Chrome/Opera/Safari */
::-webkit-input-placeholder {
  color: #999;
}
 /* Firefox 19+ */
::-moz-placeholder {
  color: #999;
}
 /* IE 10+ */
:-ms-input-placeholder {
  color: #999;
}
 /* Firefox 18- */
:-moz-placeholder {
  color: #999;
}

image.png


The difference between :placeholder-shown and ::placeholder

:placeholder-shown is for selecting the input itself when it's placeholder text is being shown. 

As opposed to ::placeholder which styles the placeholder text.

Here's a diagram:

the-difference-placeholder.png

:placeholder-shown {
  color: #f03;
}

image.png



More: ::placeholder

标签:
上一篇:Sass 基础教程 下一篇:How do I combine a background-image and CSS3 gradient on the

相关推荐