Comment changer la couleur de la bordure d'un textarea lors du :focus

Question

Je veux changer la couleur de la bordure du TEXTAREA lors de la mise au point. Mais mon code ne semble pas fonctionner correctement.

Le code est sur 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;
 }

Answer 1

Sur mon code personnel, j'ai supprimé le frontière parce qu'il a changé la taille du composant.

.input:focus {
  outline: none;
  box-shadow: 0 0 0 0.125rem red;
}

Answer 2

Essayez ceci, cela fonctionnera probablement

input{
outline-color: #fff //your color
outline-style: none // it depend on you 
}

Answer 3

Vous avez besoin juste en scss varible

$input-btn-focus-width:       .05rem !default;

Answer 4

Vous pouvez utiliser la fonction CSS pseudo-class pour le faire. Une pseudo-classe est utilisée pour définir un état spécial d'un élément.

il existe un ::focus pseudo-classe qui est utilisée pour sélectionner l'élément qui a le focus. Vous pouvez donc l'intégrer dans votre CSS comme suit

Utilisation de la classe

.my-input::focus {
  outline-color: green;
}

Utilisation de l'Id

#my-input::focus {
  outline-color: red;
}

Sélection directe d'un élément

input::focus {
  outline-color: blue;
}

Utilisation du sélecteur d'attributs

input[type="text"]::focus {
  outline-color: orange;
}