Analysis of CSS3 placeholder pseudo elements

HTML5 features have been filled with various Internet communities. Now, its features are increasingly supported by various browsers. We can use more of its features, such as the appearance of custom texts.

: Input-placeholder CSS pseudo element. No matter what field is entered, this element provides us with a style that conforms to the design standard placeholder text.

Placeholder text style

Pre-defined style in the browser. You can use the placeholder property to display text. By default, text is light gray, which is hard to read. When Developers find that no CSS style options can be used for placeholders. We found that: the input-placeholder pseudo element can free us from UA specifications and provide more styling flexibility.

For example, let's use the following placeholder and change its color and text:

 <input type="text" placehold

Er = "I'm placeholder text! ">

Then, we will use the new pseudo element to create a CSS rule:

 input::-webkit-input-placeholder {

    color: rgba(0,5,143,.5);

    text-transform: uppercase;

 }

Define the selector separately (otherwise, the browser will be ignored for the entire rule)

  input::-webkit-input-placeholder {

         color: rgba(0,5,143,.5);

         text-transform: uppercase;

 }

 input::-moz-placeholder {

         color: rgba(0,5,143,.5);

         text-transform: uppercase;

 }

 input:-moz-placeholder {   /* Older versions of Firefox */

         color: rgba(0,5,143,.5);

         text-transform: uppercase;

 }

 input:-ms-input-placeholder { 

         color: rgba(0,5,143,.5);

         text-transform: uppercase;

 } 

Placeholder property Selector

Whether to have a [placeholder] selector with a placeholder attribute is completely determined by the input field:

 input[placeholder] {

    font-weight: bold;

    border-color: blue;

 }

Now, each input field has a placeholder attribute that changes to the font width and blue border.

What attributes can we use?

Not all CSS attributes support the: input-placeholder rule. In fact, only a few CSS users are familiar with it. The most useful ones are:

Color

Font-size

Font-style

Font-weight

Letter-spacing

Line-height

Padding

Text-align

Text-decoration

It is important that the placeholder style does not affect its box model.

Browser support

Currently, the following browsers are supported: Firefox 4 +, Chrome 4 +, Safari 5 +, Opera 11.6 and IE10 .. From the analysis above, we can know that even if such a small enhancement function has helped us make great progress, it will produce a good user experience.

(This article is from the user research and experience design center of Wang zizhen.com/at http://wangzizhen.com/. For details, refer to the source)