Top 3 Input placeholder style examples in css/html

This is an short tutorial about input placeholder usage in css/html with examples

placeholder is an an short text displayed in input controls to tell user about the input control, It acts as like a label for input element. This is introduced in HTML5 You can check my previous available post:

• Angular Placeholder Example
• React input placeholder examples

CSS provides non standard pseudo selectors to change styles of an input element.

::placeholder - Latest browsers ::-webkit-input-placeholder - Chrome,opera,safari browsers ::-moz-placeholder - Mozilla Firefox 19+ browser :-ms-input-placeholder - Internet explorer 10+ :-moz-placeholder - Firefox 4 to 18 browsers

One of the important point to note is These selectors are not defined by group, but can be defined as a single selector.

Place holder can be defined for input control in html as follows

<input type="name" placeholder="Please enter name">

Changing color of place holder text is not straight forward as this

This blog covers following things

• Changing default placeholder color with css
• change placeholder on focus

How to change placeholder default color in css?

Changing placeholder color is browser specific, So we have to use vendor specific CSS pseudo elements

HHTML place holder example:

<input type="name" placeholder="Please enter name">

input::-webkit-input-placeholder { 
  color: blue;
}
input::-moz-placeholder { 
  color: blue;
}
input:-ms-input-placeholder { 
  color: blue;
}
input:-moz-placeholder { 
  color: blue;
}

How change placeholder text to uppercase in css?

<input type="Firstname" placeholder="Please enter  First name name" class="firstname">

CSS

.firstname::-webkit-input-placeholder {
   text-transform: uppercase;
}

.firstname:-moz-placeholder { 
   text-transform: uppercase;
}

.firstname::-moz-placeholder {  
   text-transform: uppercase;
}

.firstname:-ms-input-placeholder { 
   text-transform: uppercase;
}

How to change placeholder color on focus in css?

CSS provides :focus psuedo class to represents the input focus element. using placeholder vendor implementations classes and focus, we can change the focus color an placeholder

The below example displays placeholder text color in blue, on focus placeholder color is changed to red.

Code pen css placeholder example: