web-dev-qa-db-fra.com

CSS Modifier la couleur de la police de la zone de texte

J'ai cherché et cherché mais je ne peux pas tout comprendre. J'ai une zone de texte sur mon site et dans mon CSS/HTML, je l'ai définie comme une classe et je lui ai donné une image de fond sans problème. J'ai décidé que je devais changer la couleur de la police, mais peu importe ce que je fais, cela ne fonctionne tout simplement pas.

Ma zone de texte CSS est:

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

... cela ne semble pas fonctionner tout à fait. 

J'ai lu la réponse de quelqu'un d'autre à une question similaire qui disait utiliser 

onfocus="this.value=''

qui n'a rien fait, j'ai alors essayé, un espace réservé:

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

et ce genre de travail. Il met un "nom d'utilisateur" bleu dans la zone de texte. mais je dois ensuite l'effacer pour commencer à taper, ET lorsque vous tapez, il reste noir et pas dans la couleur définie.

C'est le formulaire 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> 

Alors, qu'est-ce qui fonctionnerait pour changer la couleur de ma zone de texte? et/ou effacez-le lorsque vous cliquez dessus afin que "Nom d'utilisateur" ou "Mot de passe" soit effacé et que vous puissiez entrer vos informations sans avoir à les effacer vous-même avant de les saisir? ... oh et le bouton de soumission aussi 

  • Merci
7
Rob Hopper

Fiddle

Vous avez manqué #: 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;
}

violon

enter image description here

dans votre code que vous avez utilisé <center>, ne l'utilisez pas, il est obsolète. 

Soruce

2

Votre déclaration de couleur hexadécimale est manquante #. Changez-le en color: #0090ff;

1
Dimitry_N

Essaye ça

Je suppose que vous voulez changer la couleur de la police lorsque le focus de l'utilisateur est sur 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