Top 3 Input placeholder style examples in css/html

Top 3 Input placeholder style examples in css/html

It is a short tutorial about input placeholder usage in CSS/HTML with examples.

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

CSS provides non-standard pseudo selectors to change the 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 points to note is, These selectors do not define by the group but can be defined as a single selector.

A placeholder can be defined for input control in HTML as follows.

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

Changing the color of placeholder text is not straightforward as this

This blog covers the following things.

  • Changing the default placeholder color with CSS
  • change placeholder on focus

How to change the placeholder default color in CSS?

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

HTML placeholder 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 to 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 a :focus pseudo-class to represent the input focus element. using placeholder vendor implementations classes and focus, we can change the focus color and placeholder

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

Code pen CSS placeholder example:

See the Pen