【问题标题】：CSS Change textbox font colorCSS 更改文本框字体颜色
【发布时间】：2014-02-11 03:37:59
【问题描述】：

我已经搜索和搜索，但不能完全正确。我的网站上有一个文本框，在我的 CSS/HTML 中，我将它定义为一个与其他任何东西非常相似的类，并给它一个背景图像没有问题。我决定我需要更改字体颜色，但无论我做什么，它都不起作用。

我的文本框 CSS 是：

.tb1 {
    background-color : #505050;
    background-image: url(images/mb_btn2.jpg);
    color: 0090ff;
    border-style: none;
    onfocus="this.value=''
}

...这似乎不太有效。

我阅读了其他人对使用

声明的类似问题的回复

onfocus="this.value=''

什么都没做，然后我试了一下，占位符：

<input name="username" type="text" class="tb1" maxlength="24" placeholder="Username"/>

而且这种方法奏效了。它在文本框中放置了一个蓝色的“用户名”。但是我必须先擦除它才能开始打字，并且当你打字时它仍然是黑色的，而不是定义的颜色。

这是 HTML 格式：

<div id="login" class="login"><center>
<form action="login.php" method="post">
Username:<br><input name="username" type="text" class="tb1" placeholder="Username"<br/>
Password:<br><input class ="tb1" type="password" name="password" placeholder="Password"/><br />
<input class="tb1" type="submit" name="login" value="Login"/>
</form></center>
</div>

那么什么可以改变我的文本框的颜色呢？和/或当您单击它时将其清除，以便清除“用户名”或“密码”，您可以输入您的信息而无需在输入之前自己删除它？...哦，还有提交按钮

谢谢

【问题讨论】：

我可以知道你为什么使用标签，这不能回答你的问题，但该标签已被弃用。

标签： html css text textbox

【解决方案1】：

Fiddle

你错过了#：color: #0090ff;

【讨论】：

【解决方案2】：

<div id="login" class="login">
            <form action="login.php" method="post">Username:
            <br>
                <input name="username" type="text" class="tb1" placeholder="Username"/> <br/>Password:
            <br>
            <input class="tb1" type="password" name="password" placeholder="Password" />
            <br />
            <input class="tb1" type="submit" name="login" value="Login" />
        </form>

</div>

CSS

.login
{
    width:250px;
    margin:0px auto;
}
.tb1 {
    background-color : #505050;
    background-image: url(images/mb_btn2.jpg);
    color: #0090ff;
    border-style: none;
}

fiddle

在您的代码中您使用了 <center> ，不要使用它，它已被弃用。

Soruce

【讨论】：

【解决方案3】：

您的十六进制颜色声明丢失#。改成color: #0090ff;

【讨论】：

【解决方案4】：

试试这个

我假设您想在用户焦点位于 TextBox 时更改字体颜色。

.tb1 {
    background-color : #505050;
    background-image: url(images/mb_btn2.jpg);
    color: RED;
    border-style: none;

}

.tb1:focus {
    background-color : #505050;
    background-image: url(images/mb_btn2.jpg);
    color: YELLOW;
    border-style: none;

}

【讨论】：