Comment faire pour modifier la couleur de surbrillance de la zone de texte à l'aide de l'accent sélecteur css

Je suis nouveau sur CSS. J'ai un champ de saisie de texte où j'ai besoin de changer la couleur de la bordure du rouge pour une autre couleur. J'ai utilisé l'accent sélecteur de CSS et n'a pas réussi.
Ci-dessous est le champ de saisie :

<label>Phone<font color="red">*</font></label><br>
<span>
    <input id="element_4_1" name="element_4_1" class="element text" size="3" maxlength="3" value=""  type="text"> -
</span>
<span>
    <input id="element_4_2" name="element_4_2" class="element text" size="4" maxlength="4" value="" type="text"> -
</span>
<span>
    <input id="element_4_3" name="element_4_3" class="element text" size="10" maxlength="10" value=""  type="text" required >
</span>

Et le css :

.element text:focus {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

Edit :
Lorsque je clique sur soumettre le formulaire, comme il est un champ obligatoire, cette montre rouge si vide.
Maintenant, il ne fonctionne pas. Comment puis-je changer la couleur de surbrillance de la zone de texte lorsque je me concentre sur elle.

OriginalL'auteur user3004356 | 2014-01-30

  1. 16

    Évidemment, il ne fonctionnera pas tant que le sélecteur est mauvais, vous êtes à l'aide de .element text qui sélectionne un élément de <text>(balise incorrecte) imbriquée à l'intérieur d'élément ayant un class .element il devrait être

    .element.text:focus
      --^--
 /* No space as well */

    Démo

    Demo 2 (Lil cleaner)

    Démo 3 (Animation de la :focus)

    span input[type="text"]:focus { /* You can also use .element.text:focus here */
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

    OriginalL'auteur Mr. Alien

  2. 0

    . est absent de text classe et essayer de pointage de l'entrée

    input.text:focus {
  border-color: green;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

    DÉMO

    OriginalL'auteur Sowmya

  3. 0

    Vous utilisez .element text:focus qui sélectionne rien, car il n'y a pas d'élément comme texte dans .element. Au lieu de cela, vous devez utiliser .element.text:focus
    pour eg.

    .element.text:focus{
   ...
}

    OriginalL'auteur Arjun