css占位符_HTML5占位符CSS样式

css占位符

4/25/2011: This attribute is not styleable as of Opera 11. Internet Explorer 10 will introduce placeholder support.

2011年4月25日：从Opera 11开始，此属性不可设置样式。InternetExplorer 10将引入placeholder支持。

Last week I showed you how you could style selected text with CSS. I've searched for more interesting CSS style properties and found another: INPUT placeholder styling. Let me show you how to style placeholder text within INPUTelements with some unique CSS code.

上周，我向您展示了如何使用CSS为选定的文本设置样式 。 我搜索了更多有趣CSS样式属性，然后发现了另一个： INPUT占位符样式。 让我向您展示如何使用一些唯一CSS代码在INPUT元素内设置占位符文本的样式。

View Demo 观看演示

CSS (The CSS)

Firefox employs a different pattern than Safari and Chrome. Each property name is self-explanatory though:

Firefox采用与Safari和Chrome不同的模式。 每个属性名称都是不言自明的：

/* all */
::-webkit-input-placeholder { color:#f00; }
::-moz-placeholder { color:#f00; } /* firefox 19+ */
:-ms-input-placeholder { color:#f00; } /* ie */
input:-moz-placeholder { color:#f00; }

/* individual: webkit */
#field2::-webkit-input-placeholder { color:#00f; }
#field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

/* individual: mozilla */
#field2::-moz-placeholder { color:#00f; }
#field3::-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

You will only want to employ the most basic of styles to the placeholder. Color, font-style, and font-variant are probably the styles you will want to employ. Go too far with your placeholder styling and you may create the animated GIF of input styles. Note that Mozilla Firefox doesn't support placeholder styling until version 4.

您只希望将最基本的样式应用于占位符。 颜色，字体样式和字体变化可能是您要使用的样式。 太过占位符样式，您可能会创建输入样式的动画GIF。 请注意，Mozilla Firefox在版本4之前不支持占位符样式。

View Demo 观看演示

Styling elements with the placeholder attribute is something you don't need to do but could be just another one of those small details that sets your website apart from other websites. Hopefully IE9 and Opera soon follow suit in allowing styling of placeholder text within INPUT elements...or expose their API for doing so!

使用占位符属性为元素设置样式是您不需要做的，但是可能只是使您的网站与其他网站区分开的那些小细节中的另一个。 希望IE9和Opera很快会遵循这种做法，允许在INPUT元素内设置占位符文本的样式...或者公开这样做的API！

翻译自: https://davidwalsh.name/html5-placeholder-css

css占位符