CSS Change textbox font color

Question

I've searched and searched but can't quite get this right. I have a text box on my site and in my CSS/HTML I defined it a class much like anything else and gave it a background image no problem. I decided I needed to change the font color but no matter what I do, it just doesn't work.

My text box CSS is:

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

...this doesnt seem to quite work.

I read someone else's response to a similar question that stated using

onfocus="this.value=''

which didn't do anything, I then tried, a placeholder:

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

and this sort of worked. It put a blue "Username" in the textbox. but I then have to erase it to begin typing, AND when you type it still comes out black and not in the defined color.

This is the form 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>

So what would work to change the color of my textbox? and/or clear it out when you click on it so "Username" or "Password" is cleared and you can enter your information without having to erase it yourself prior to input?...oh and the submit button too

Thanks

may i know why u have used the tag <center> , this does not answer your question but that tag is deprecated. — Amarnath Balasubramanian
– Amarnath Balasubramanian, Commented Feb 11, 2014 at 3:58

JunM · Accepted Answer · 2014-02-11 03:44:57Z

9

Fiddle

You missed # : color: #0090ff;

answered Feb 11, 2014 at 3:44

JunM

7,1608 gold badges40 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Amarnath Balasubramanian · Accepted Answer · 2014-02-11 06:33:04Z

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

in your code you have used <center> , dont use it, it has been deprecated.

Soruce

edited Feb 11, 2014 at 6:33

answered Feb 11, 2014 at 3:55

Amarnath Balasubramanian

9,5028 gold badges38 silver badges62 bronze badges

Comments

dimitry_n · Accepted Answer · 2017-12-09 05:32:31Z

1

Your hex color declaration is missing #. Change it to color: #0090ff;

edited Dec 9, 2017 at 5:32

answered Feb 11, 2014 at 3:47

dimitry_n

3,0291 gold badge33 silver badges53 bronze badges

Comments

Rohit Kumar · Accepted Answer · 2017-05-17 08:22:51Z

0

Try This

I assume you want to change the color of the font when the user focus is on 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;

}

answered May 17, 2017 at 8:22

Rohit Kumar

8064 silver badges22 bronze badges

Collectives™ on Stack Overflow

CSS Change textbox font color

4 Answers 4

Comments

fiddle

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related