Styling Placeholder Text of an Input Field with Multiple Colors

PressTigers

Styling Placeholder Text of an Input Field with Multiple Colors

November 4, 2016
Leave a comment

With CSS and few lines of JavaScript, you can customize your web page presentations to be almost anything you want it to be. In contact forms and search fields of a website, you can change the regular input field text styling by using the input element.

In this article, you will learn to change (or style) the placeholder text with multiple colors of a single input field.

You will start off by creating a new HTML document. The HTML structure will be as follows:

<div class="input-required">
	<label>
            	<span class="first-letter">Password</span>  
                        <span class="second-letter">*</span>
            </label>
            <input type="password" id="password" name="password" class="input-text">
 </div>
<div class="input-required">
	<label>
            	<span class="first-letter">H</span>  
                        <span class="second-letter">e</span>
                        <span class="third-letter">l</span>
                        <span class="fourth-letter">l</span>
                        <span class="fifth-letter">o</span>
             </label>
	<input type="text" id="hello" name="Hello" class="input-text">
</div>

<label>

<span class="first-letter">Password</span>

</label>

</div>

<label>

</label>

</div>

Once you are done with the HTML structure, let’s style these <inputs>. The idea is to modify the default placeholder design just like the screenshot below:

Now, style the placeholder with multiple colors by using the following CSS code:

.input-required {
  position: relative;
}
.input-required > label {
  position: absolute;
  left: 10px;
  top: 50%;
  margin: -0.6em 0 0;
  font-weight: 300;
}
.input-required .hide {
  display: none;
}
.first-letter {
  color: #6b6b6b;
}
.second-letter {
  color: red;
}
.third-letter {
  color: black;
}
.fourth-letter {
  color: blue;
}
.fifth-letter {
  color: brown;
}

.input-required {

position: relative;

}

.input-required > label {

position: absolute;

left: 10px;

top: 50%;

margin: -0.6em 0 0;

font-weight: 300;

}

.input-required .hide {

display: none;

}

.first-letter {

color: #6b6b6b;

}

.second-letter {

color: red;

}

.third-letter {

color: black;

}

.fourth-letter {

color: blue;

}

.fifth-letter {

color: brown;

}

Additionally, use the following JavaScript code to enhance the look of placeholder among all cross-browsers and devices as well:

$(document).ready(function(){
	$('.input-required input').on('focus',function(){
		if(!$(this).parent('.input-required').find('label').hasClass('hide')){
                        $(this).parent('.input-required').find('label').addClass('hide');
                        }
	});
            $('.input-required input').on('blur',function(){
		if($(this).val() == '' && $(this).parent('.input-required').find('label').hasClass('hide')){
                        $(this).parent('.input-required').find('label').removeClass('hide');
                    }
             });
});