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

Question

我有一个输入字段，其中文本的颜色为黑色。(我正在使用jquery.placeholder) 假设其中的文本是“电子邮件”

当你点击这个字段时，黑色的占位文本就会消失（多亏了jquery.placeholder）。

任何输入到该字段中的文本，我都希望它变成红色，并且在你取消选择该字段后，它仍保持为红色。

目前，“电子邮件”这段文字是黑色的，我输入的任何内容都是红色的，这很好，但是一旦我取消选择，它就会变回黑色。有人可以帮帮我吗？我希望文字保持为红色，即使取消选择后也是如此。这是我的代码：

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

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

- John

Answer 1

将第二个样式更改为如下：

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

目前，您正在告诉表单在焦点离开后将文本更改为黑色。上述方法可以解决这个问题。

此外，在样式表中将正常状态的样式放在:focus和:hover样式之前是一个好主意。这有助于防止出现此问题。因此：

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

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

- Jason Gennaro

---

好的，我明白了。但是如果我将我的第二个样式更改为红色，那么原始的占位文本也会变成红色（而不是黑色）。这有意义吗？ - John

是的。如果你需要文本先变黑，可以使用占位符插件。或者你可以使用一些额外的脚本来完成这个任务。 - Jason Gennaro

谢谢，伙计。我完全忘记声明占位符样式了，这与输入框的样式是分开的！ - John

Answer 2

如果您希望占位文本为红色，则需要在 CSS 中具体定位它。

input::placeholder{
  color: #f00;
}

- Dino Senjkovic

Answer 3

我经常编写输入提示，就像这样：

    <input style="color: #C0C0C0;" value="[e-mail]" 
    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 id = 0; style="color: #C0C0C0;" value="[e-mail]" 
    onfocus=clearField(this)>

- oldmoses

Answer 4

为输入框添加颜色，请使用以下 CSS 代码：

input{
     color: black;
}

- Codemaker

Answer 5

替换：

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

使用：

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

或者颜色：#ff0000;

- angrydust