Styling Placeholder Text of an Input Field with Multiple Colors

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:

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:

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

Using the above mentioned technique, you will be able to customize the input field of a placeholder according to your will.

User Comments

3 thoughts on “Styling Placeholder Text of an Input Field with Multiple Colors

    Wutthipong Bunyafakpol says:

    This’s my suggestion might be good , when we are clicked label.

    $(‘.input-required label’).on(‘click’,function(){

Leave a Reply

Your email address will not be published. Required fields are marked *

    Get in Touch