web-dev-qa-db-fra.com

Couleur du texte du champ de saisie CSS du texte saisi

J'ai un champ de saisie et la couleur du texte est noire. (J'utilise jquery.placeholder) Disons que le texte à l'intérieur est "E-Mail"

Lorsque vous cliquez sur ce champ, le texte de l'espace réservé noir disparaît (grâce à jquery.placeholder).

Tout texte saisi dans ce champ doit être rouge et lorsque vous désélectionnez ce champ, il doit rester rouge.

Pour le moment, le texte "E-Mail" est en noir et tout ce que je tape est en rouge, ce qui est bien, mais dès que je désélectionne, le texte revient au noir. Quelqu'un peut-il m'aider? Je veux que le texte reste rouge, même après sa désélection. Voici mon code

textarea:focus, input:focus {
    color: #ff0000;
}

input, select, textarea{
    color: #000;
}
cssinputfocustextarea
36
John

Changez votre deuxième style en ceci:

input, select, textarea{
    color: #ff0000;
}

Pour le moment, vous indiquez au formulaire de modifier le texte en black une fois le focus désactivé. Les remèdes ci-dessus ça.

En outre, il est judicieux de placer les styles d'état normal devant les styles :focus et :hover dans votre feuille de style. Cela aide à prévenir ce problème. Alors

input, select, textarea{
    color: #ff0000;
}

textarea:focus, input:focus {
    color: #ff0000;
}
47
Jason Gennaro

Je fais toujours des invites, comme ceci:

    <input style="color: #C0C0C0;" value="[email protected]" 
    onfocus="this.value=''; this.style.color='#000000'">

Bien sûr, si votre utilisateur remplit le champ, modifie le focus et revient au champ, le champ sera à nouveau effacé. Si vous le faites comme ça, assurez-vous que c'est ce que vous voulez ... Vous pouvez en faire une chose unique en définissant un sémaphore, comme ceci:

    <script language = "text/Javascript"> 
    cleared[0] = cleared[1] = cleared[2] = 0; //set a cleared flag for each field
    function clearField(t){                   //declaring the array outside of the
    if(! cleared[t.id]){                      // function makes it static and global
        cleared[t.id] = 1;  // you could use true and false, but that's more typing
        t.value='';         // with more chance of typos
        t.style.color='#000000';
        }
    }
    </script>

Votre champ <input> ressemble alors à ceci:

    <input id = 0; style="color: #C0C0C0;" value="[email protected]" 
    onfocus=clearField(this)>
2
oldmoses

Si vous voulez que le texte fictif soit en rouge, vous devez le cibler spécifiquement en CSS.

Écrire:

input::placeholder{
  color: #f00;
}
0
Dino Senjkovic

remplacer:

input, select, textarea{
    color: #000;
}

avec:

input, select, textarea{
    color: #f00;
}

ou color: #ff0000;

0
angrydust

Pour ajouter de la couleur à une entrée, utilisez le code CSS suivant:

input{
     color: black;
}
0
Codemaker