CSS Input field text color of inputted text

问题

I have an input field, and the color of the text in it is black. (I'm using jquery.placeholder) Let's say the text in there is "E-Mail"

When you click on this field, the black placeholding text dissapears (thanks to jquery.placeholder).

Any text inputted into this field, I want it to turn red, and when you deselect this field, I want it to stay red.

At the moment, the text saying "E-Mail" is black, and anything I type into is red, which is great, but as soon as i deselect, it goes back to black. Can anyone help me? I want the text to stay red, even after it's deselected. Here is my code

textarea:focus, input:focus {
    color: #ff0000;
}

input, select, textarea{
    color: #000;
}

回答1:

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;
}

回答2:

I always do input prompts, like this:

    <input style="color: #C0C0C0;" value="someone@somewhere.com" 
    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="someone@somewhere.com" 
    onfocus=clearField(this)>

回答3:

If you want the placeholder text to be red you need to target it specifically in CSS.

Write:

input::placeholder{
  color: #f00;
}

回答4:

replace:

input, select, textarea{
    color: #000;
}

with:

input, select, textarea{
    color: #f00;
}

or color: #ff0000;

回答5:

To add color to an input, Use the following css code:

input{
     color: black;
}

来源：https://stackoverflow.com/questions/6669846/css-input-field-text-color-of-inputted-text

标签

css

input

focus

textarea