Thursday, 3 October 2013

HTML5 Placeholder

Since we are using Polyfills, all the placeholder text here in this demo should appear on every browsers, including in IE

Basic Implementation

Using JaveScript

<input type="text" name="foo" value="Placeholder text"
onfocus="if(this.value=='Placeholder text')this.value='';"
onblur="if(this.value=='')this.value='Placeholder text';">

Placeholder Attribute

<input type="text" name="foo" placeholder="Placeholder Text"> 

Styling Placeholder

input::-webkit-input-placeholder {
 color: green;
}
input:-moz-placeholder {
 color: green;
}

Attribute Selector

input[placeholder] {
 border: 1px solid green;
}

No comments:

Post a Comment