Before introducing the placeholder attribute of HTML5, we have implemented some page examples for everyone to refer to, but the background text in these examples is gray, the style is very simple, in fact, they can do more beautiful, The CSS3 provides a special rule attribute to beautify the background tip information for input boxes implemented with placeholder. Let's look at how to use a dedicated CSS property to beautify the input box with the placeholder property.
CSS Code
The wording in Firefox is a bit different from Google's browser and Safari, but I believe it will be unified later.
/*General*/::-webkit-input-placeholder {color: #f00;}::-moz-placeholder {color: #f00;}/*Firefox 19+*/:-ms-input-placeholder {color: #f00;}/*IE*/Input:-moz-placeholder {color: #f00;}/*WebKit Dedicated*/#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; }/*Mozilla dedicated*/#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; }
In fact, just a code, but in order to achieve the widest range of browser support, plus the respective browser engine prefix (Vendor Prefix), suddenly turned into 10 lines of code, I hope this situation will be as soon as possible in the past.
Some basic CSS styles you can use on placeholder-colors, fonts, font styles, and so on. You can also create more complex styles, such as animated GIFs.
Example Demo
Here are input boxes, with four kinds of landscaping, I used autofocus to put the cursor in the first input box, but you can also enter information in other input boxes to see the effect:
The beauty of the background hint (placeholder) for the input box is just a small embellishment to the web app, but it's the small difference in detail that distinguishes your site from other people's websites. IE10 also supports the placeholder attribute, so this is a wide range of just CSS tricks.
CSS beautification of input background hint text (placeholder) in HTML5