Skip to main content

How to change Placeholder text color on focus using css

By

Introduction:

In this article i am going to explain about changing the place holder text color
and switching the placeholder text color during on fucus and on blur events using css.

Explanation:

The placeholder attribute in html5 is used to provide the watermark text to textboxes and textareas.
Before that i was using Watermarkify.js to display the watermark text. But to use watermarkify.js we need to implement the additinal js along with the watermarkify.css.

But placeholder attribute in html5 made it easier without any need for additional css and js.

Below is the html code i used for the explanation purposes.

HTML Code:

<body style="margin: 40px auto; width: 960px;">
    <h2>
        Welcome to DotNetPickles!
    </h2>
    <table>
        <tr>
            <td>
                Name
            </td>
            <td>
                <input type="text" placeholder="Name" id="txtName" />
            </td>
        </tr>
        <tr>
            <td>
                Email
            </td>
            <td>
                <input type="text" placeholder="Email" id="Text1" />
            </td>
        </tr>
        <tr>
            <td>
                Mobile
            </td>
            <td>
                <input type="text" placeholder="Mobile" id="Text2" />
            </td>
        </tr>
        <tr>
            <td>
                Address
            </td>
            <td>
                <textarea placeholder="Address"></textarea>
            </td>
        </tr>
    </table>
</body>


But the problem is by default the watermark text displayed by the placeholder attribute will be in Grey color.
Placeholder with default text color

I supposed to change it to some other suitable color as per my form design.
So i have used the below code to change the placeholder text color.

<style type="text/css">
/* CSS To change placeholder text color of textbox and textarea */
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder
{
    color: red;
}
       
/* CSS  To change placeholder text color of textbox and textarea Firefox browser version < 19 */
input:-moz-placeholder, textarea:-moz-placeholder
{
    color: red;
    opacity: 1;
}
/*  CSS To change placeholder text color of textbox and textarea Firefox browser > 19 */
input::-moz-placeholder, textarea::-moz-placeholder
{
    color: red;
    opacity: 1;
}
/*  CSS To change placeholder text color of textbox and textarea Internet Explorer 10 */
input:-ms-input-placeholder, textarea:-ms-input-placeholder
{
    color: red;
}
</style>

Now the output will be
Placeholder with changed text color
But again i came with another requirement saying that the i need to show change the placeholder text color during the on focus and on blur events to show the differentiation to the user. So i have used the below code to make it work
<style type="text/css">
/*CSS To change color of input and textarea during on focus event */
       
input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder
{
    color: #c4c7c8;
}
/* CSS To change color of input and textarea during on focus event in Firefox < 19 */
input:focus:-moz-placeholder, textarea:focus:-moz-placeholder
{
    color: #c4c7c8;
}
/* CSS To change color of input and textarea during on focus event in Firefox > 19 */
input:focus::-moz-placeholder, textarea:focus::-moz-placeholder
{
    color: #c4c7c8;
}
/* CSS To change color of input and textarea during on focus event in Internet Explorer 10 */
input:focus:-ms-input-placeholder, textarea:focus:-ms-input-placeholder
{
    color: #c4c7c8;
}

</style>

Now i have achieved the below output.
How to change Placeholder text color on focus using css



Labels:

Comments

Post a Comment

Popular posts from this blog

Code To Convert rupees(numbers) into words using C#.Net

By
Introduction: In my previous article I have explained about how to validate emailid using javascript . In this article I am going to explain about code used to convert rupees(numbers) into words using C#.Net . Explanation: For explanation purpose I have a page. It has a textbox to input the numbers. And when you click on the convert to words button then it will convert the input numbers into words and shows it in the below label. Below is the C# code used to do this functionality. public static string NumbersToWords( int inputNumber) {     int inputNo = inputNumber;     if (inputNo == 0)         return "Zero" ;     int [] numbers = new int [4];     int first = 0;     int u, h, t;     System.Text. StringBuilder sb = new System.Text. StringBuilder ();     if (inputNo < 0)     { ...
16 comments
Read More...

Puzzles for kids - 12 Days Of Christmas

By
According to the traditional song, on the first day of Christmas (25th December), my true love sent to me: . A partridge in a pair tree On the second day of Christmas (26th December), my true love sent to me THREE presents: . Two turtle doves . A partridge in a pear tree On the third day of Christmas (27th December and so on) my true love sent to me SIX presents: . Three French hens . Two turtle doves . A partridge in a pear tree This carries on until the the twelfth day of Christmas, when my true love sends me: Twelve drummers drumming Eleven pipers piping Ten lords a-leaping Nine ladies dancing Eight maids a-milking Seven swans a-swimming Six geese a-laying Five gold rings Four calling birds Three French hens Two turtle doves A partridge in a pear tree After the twelve days of Christmas are over, how many presents has my true love sent me altogether? Our Solution: 1 + 3 + 6 + 10 + 15 + 21 + 28 + 36 + 45 + 55 + 66 + 78 = 364 presents Which is really interesting when you think ...
Post a Comment
Read More...

Asp.Net DataTable Manipulation - Add, Update,Delete & Sort DataTable in C#.Net & VB.Net

By Anonymous
In the asp.net developer's life it is very common to come across the datatable manipulation. So here i have decided to explain the datatable manipulation like adding records to datatable, editing and updating datatable records,deleting records from datatable based on the condition and finally sorting datatable based on columns.
Post a Comment
Read More...