web-dev-qa-db-ja.com

CSSテキストボックスのフォントの色を変更

私は検索して検索しましたが、これを正しく行うことができません。私のサイトにはテキストボックスがあり、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>

では、テキストボックスの色を変更するにはどうすればよいでしょうか。および/またはクリックするとクリアされ、「ユーザー名」または「パスワード」がクリアされ、入力前に自分で消去せずに情報を入力できますか？...ああ、送信ボタンも

  • ありがとう
htmlcsstexttextbox
7
Rob Hopper

フィドル

あなたが逃しました #：color: #0090ff;

7
JunM
<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;
}

フィドル

enter image description here

あなたのコードではあなたが使用した<center>、使用しないでください。非推奨になりました。

ソース

2
Amarnath Balasubramanian

16進数の色の宣言に#がありません。 color: #0090ff;に変更します

1
dimanyc

これを試す

ユーザーがフォーカスを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;

}
0
Rohit Kumar