Comment changer la couleur de la bordure de la zone de texte sur: focus

115

Pardonnez-moi, c'est une question stupide, mais j'ai besoin d'aide. Je veux changer la couleur de la bordure de TEXTAREA sur la mise au point. mais mon code ne semble pas fonctionner correctement.

Veuillez consulter le code sur le violon .

<form name = "myform" method = "post" action="insert.php"  onsubmit="return validateform()" style="width:40%">
        <input type="text" placeholder="Enter Name." name="name" maxlength="300" class="input">
        <input type="email" placeholder="Enter E-mail." name="address" maxlength="300" class="input">
        <textarea placeholder="Enter Message." name="descrip" class="input" ></textarea>    
<br>
<input class="button secondary" type=submit name="submit" value="Submit" >
</form>

Voici le CSS

.input {
border:0; 
padding:10px; 
font-size:1.3em; 
font-family:"Ubuntu Light","Ubuntu","Ubuntu Mono","Segoe Print","Segoe UI";
color:#ccc; 
border:solid 1px #ccc; 
margin:0 0 20px; 
width:300px;
-moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.2); 
-webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2); 
box-shadow: inner 0 0 4px rgba(0, 0, 0, 0.2);
-webkit-border-radius: 3px; 
-moz-border-radius: 3px; 
border-radius: 3px;

}
input:focus { 
    outline: none !important;
    border-color: #719ECE;
    box-shadow: 0 0 10px #719ECE;
}
html css Mercuriel
la source
la couleur que vous avez choisie pour la bordure ressemble à la couleur par défaut ....
lologic

Réponses:

240 
.input:focus {
    outline: none !important;
    border:1px solid red;
    box-shadow: 0 0 10px #719ECE;
}
à la dérive
la source
2
Vous pouvez également changer l'entrée: focus en .input: focus car vous utilisez déjà cette classe sur la zone de texte. Vous vous débarrassez du sélecteur supplémentaire de cette façon.
Hoshts
1
Juste curieux, pourquoi les zones de texte ont- outline: noneelles besoin mais pas les entrées de zone de texte normales?
Justin Skiles
Je pense qu'il vaut mieux utiliser le contour et l'ombre ensemble "contour: solid 2px # 8dc63f; box-shadow: 0 0 21px # 8dc63f;" :-)
BG BRUNO
1
Ce lien violon n'existe pas.
Arpan Jain
22

Il y a une entrée: focus car il y a une zone de texte: focus

input:focus { 
    outline: none !important;
    border-color: #719ECE;
    box-shadow: 0 0 10px #719ECE;
}
textarea:focus { 
    outline: none !important;
    border-color: #719ECE;
    box-shadow: 0 0 10px #719ECE;
}
Philip Sumesgutner
la source
11
Les deux règles peuvent être combinées comme suit - input:focus, textarea:focus { outline: none !important; border-color: #719ECE; box-shadow: 0 0 10px #719ECE; }Si vous voulez le même effet sur les deux types d'éléments.
Hitesh
8

La règle CSS est probablement un moyen plus approprié de changer la couleur du contour outline-color.

textarea {
  outline-color: #719ECE;
}

ou pour entrée

input {
  outline-color: #719ECE;
}

box-shadow n'est pas tout à fait la même chose et cela peut être différent du contour, surtout si vous appliquez un style personnalisé à votre élément.

Grgur
la source
1
Oui, mais le contour n'est-il pas un rectangle? Pas bon si vous stylisez les boutons / l'entrée avec un rayon de bordure.
Joseph Kreifels II
1
Le plan est ce que les navigateurs utilisent pour mettre en évidence les champs ciblés pour l'accessibilité. Je recommanderais de s'y tenir chaque fois que possible. De toute évidence, vous êtes libre de créer des solutions de contournement si votre conception est très spécifique :)
Grgur
3

si simple :

 outline-color : blue !important;

tout le CSS pour mon bouton react-boostrap est:

.custom-btn {
    font-size:1.9em;
    background: #2f5bff;
    border: 2px solid #78e4ff;
    border-radius: 3px;
    padding: 50px 70px;
    outline-color : blue !important;
    text-transform: uppercase;
    user-select: auto;
    -moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.2);
    -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}
Farbod Aprin
la source
0

vous avez juste besoin de la variable scss

$input-btn-focus-width:       .05rem !default;
Vahid Alvandi
la source