:-ms-input-placeholder
=
- -ms-input-placeholder=
Examples
The following example highlights the street and ZIP code fields with a custom style.
The placeholder text is displayed with the specified style until the field has focus, meaning that the field can be typed into. When the field has focus, it returns to the normal style of the input field and the placeholder text disappears.
<!DOCTYPE html >
<html>
<head>
<title>Placeholder style example</title>
<style type="text/css">
input /* normal style */
{
background-color:LightGray;
color:Purple;
}
input.address:-ms-input-placeholder /* placeholder only style */
{
font-style:italic;
background-color:yellow;
color:Red;
}
</style></head>
<body>
<form id="test">
<p><label>Enter Name: <input id="name" placeholder="Your Name"/></label></p>
<p><label>Enter Street: <input id="street" class="address"
placeholder="Your address" /></label></p>
<p><label>Enter a zip code: <input type="num" pattern="(0-9){5}"
id="zip" class="address" placeholder="5 digit zip" /></label></p>
<input type="submit" />
</form>
</body>
</html>
Notes
Remarks
By default, placeholder text in input fields is light gray, but the :-ms-input-placeholder pseudo-class selector enables you to style it however you want.
Syntax
selector
- -ms-input-placeholder
- selector
- A CSS simple selector.
See also
Related articles
Pseudo-Classes
:-ms-input-placeholder
Selectors
:-ms-input-placeholder
Related pages
- HTML5 Forms (Internet Explorer 10 Guide for Developers)HTML5 Forms (Internet Explorer 10 Guide for Developers)
- placeholder attributeplaceholder attribute
Attributions
Microsoft Developer Network: [Windows Internet Explorer API reference Article]