CSS Input field text color of inputted text
Change your second style to this:
input, select, textarea{
color: #ff0000;
}
At the moment, you are telling the form to change the text to black
once the focus is off. The above remedies that.
Also, it is a good idea to place the normal state styles ahead of the :focus
and :hover
styles in your stylesheet. That helps prevent this problem. So
input, select, textarea{
color: #ff0000;
}
textarea:focus, input:focus {
color: #ff0000;
}
If you want the placeholder text to be red you need to target it specifically in CSS.
Write:
input::placeholder{
color: #f00;
}
I always do input prompts, like this:
<input style="color: #C0C0C0;" value="[email protected]"
onfocus="this.value=''; this.style.color='#000000'">
Of course, if your user fills in the field, changes focus and comes back to the field, the field will once again be cleared. If you do it like that, be sure that's what you want. You can make it a one time thing by setting a semaphore, like this:
<script language = "text/Javascript">
cleared[0] = cleared[1] = cleared[2] = 0; //set a cleared flag for each field
function clearField(t){ //declaring the array outside of the
if(! cleared[t.id]){ // function makes it static and global
cleared[t.id] = 1; // you could use true and false, but that's more typing
t.value=''; // with more chance of typos
t.style.color='#000000';
}
}
</script>
Your <input> field then looks like this:
<input id = 0; style="color: #C0C0C0;" value="[email protected]"
onfocus=clearField(this)>
To add color to an input, Use the following css code:
input{
color: black;
}
replace:
input, select, textarea{
color: #000;
}
with:
input, select, textarea{
color: #f00;
}
or color: #ff0000;