Export (0) Print
Expand All
4 out of 16 rated this helpful - Rate this topic

:-ms-input-placeholder pseudo-class

Applies one or more styles to placeholder text in an input element.

Internet Explorer 10

Syntax

selector:-ms-input-placeholder {...}

Parameters

selector

A CSS simple selector.

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.

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 {
    background-color:#E8E8E8;
    color:black;
  }
  /* placeholder only style */   
  input.address:-ms-input-placeholder {
    font-style:italic;        
    color: red;
    background-color: yellow;
  }
  </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" placeholder="Your address" /></label></p>
    <p><label>Enter a zip code: <input type="num" pattern="(0-9){5}" title="5 digit zip" id="zip" class="address" placeholder="5 digit zip" /></label></p>
    <input type="submit" />
  </form>
</body>
</html>


You can view this page. (Internet Explorer 10 is required for this page to render correctly.)

See also

HTML5 Forms (Internet Explorer 10 Guide for Developers)
placeholder attribute

 

 

Did you find this helpful?
(1500 characters remaining)
Thank you for your feedback
Show:
© 2014 Microsoft. All rights reserved.