CSS Input field text 颜色输入文本答案

【问题标题】：CSS Input field text color of inputted textCSS Input field text 颜色输入文本
【发布时间】：2011-10-03 22:23:42
【问题描述】：

我有一个输入字段，其中文本的颜色是黑色。（我用的是 jquery.placeholder）假设里面的文字是“E-Mail”

当您单击此字段时，黑色占位符文本消失（感谢 jquery.placeholder）。

在此字段中输入的任何文本，我希望它变为红色，当您取消选择此字段时，我希望它保持红色。

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

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

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

【问题讨论】：

标签： css input focus textarea

【解决方案1】：

将您的第二种样式更改为：

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

目前，您正在告诉表单在焦点关闭后将文本更改为black。以上补救办法。

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

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

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

【讨论】：

好的，我明白了，但是如果我将第二个样式更改为红色，那么原来的占位符文本也会更改为红色（而不是黑色）。这有意义吗？
是的。如果您需要先将文本变为黑色。将其设置在占位符插件中。或者您可以使用一些额外的脚本来完成此操作。
谢谢伙计，我完全错过了声明占位符样式，它与输入框样式分开！

【解决方案2】：

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

写：

input::placeholder{
  color: #f00;
}

【讨论】：

【解决方案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 id = 0; style="color: #C0C0C0;" value="someone@somewhere.com" 
    onfocus=clearField(this)>

【讨论】：

【解决方案4】：

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

input{
     color: black;
}

【讨论】：

【解决方案5】：

替换：

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

与：

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

或color: #ff0000;

【讨论】：