Sometimes we want to change the placeholder text in HTML forms. But unfortunately it’s not like other tags. It’s an HTML5 form attribute and likewise other tags we can’t pick and customize as our own.

It has own hidden attribute and by picking that tag we can easily stylize and customize the placeholder text.

Suppose we have a HTML form like this.

 
<div class="form-custom"
  <div class="form-group">
    <label for="exampleInputEmail1">Email address
    <input type="email" class="form-control" placeholder="Enter email">

Here, we can see the placeholder text  placeholder=”Enter email here” .

Our goal is to customize that text between those two quotation marks.

.form-custom ::-webkit-input-placeholder {
   color: #000;
}
.form-custom :-moz-placeholder { /* Firefox 18- */
   color: red;  
}
.form-custom ::-moz-placeholder {  /* Firefox 19+ */
   color: red;  
}

.form-custom :-ms-input-placeholder {  
   color: red;  
}

 

So, to customize the text in placeholder we have to just add these lines to our css file

Advertisements