CSS更改文本框字体颜色

时间:2014-02-11 03:37:59

标签: html css text textbox

我进行了搜索和搜索,但无法做到这一点。我的网站上有一个文本框,在我的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> 

那么改变文本框颜色会有什么用呢?和/或当你点击它时将其清除,以便清除“用户名”或“密码”,你可以输入你的信息而不必在输入之前自己删除它... ...哦和提交按钮

  • 感谢

4 个答案:

答案 0 :(得分:7)

Fiddle

您错过了#color: #0090ff;

答案 1 :(得分: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

enter image description here

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

Soruce

答案 2 :(得分:1)

您的十六进制颜色声明缺失#。将其更改为color: #0090ff;

答案 3 :(得分:0)

试一下

我假设您想要在用户焦点位于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;

}