CSS输入输入文本的字段文本颜色

Question

我有一个输入字段,其中的文本颜色为黑色.(我正在使用jquery.placeholder)让我们说那里的文字是"电子邮件"

当您单击此字段时,黑色占位文本消失(感谢jquery.placeholder).

输入到此字段的任何文本,我希望它变为红色,当您取消选择此字段时,我希望它保持红色.

目前,"电子邮件"的文字是黑色的,我输入的任何内容都是红色的,这很棒,但是一旦取消选择,它就会变回黑色.谁能帮我？我希望文本保持红色,即使它被取消选中.这是我的代码

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

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

Answer 1

将您的第二种风格更改为:

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

目前,您正在告诉表单black在焦点关闭后将文本更改为.以上补救措施.

此外,最好将正常状态样式放在样式表中的样式:focus和:hover样式之前.这有助于防止出现此问题.所以

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

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

Answer 2

如果您希望占位符文本为红色，则需要在 CSS 中专门针对它。

写：

input::placeholder{
  color: #f00;
}

Answer 3

我总是做输入提示，像这样：

    <input style="color: #C0C0C0;" value="someone@somewhere.com" 
    onfocus="this.value=''; this.style.color='#000000'">

当然，如果您的用户填写该字段，更改焦点并返回该字段，该字段将再次被清除。如果您这样做，请确保这就是您想要的。您可以通过设置信号量使其成为一次性的事情，如下所示：

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

您的 <input> 字段如下所示：

    <input id = 0; style="color: #C0C0C0;" value="someone@somewhere.com" 
    onfocus=clearField(this)>