Introduction:
In this article i am going to explain about changing the place holder text colorand 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>
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
<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.
Comments
Post a Comment