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

.input:focus {
    outline: none !important;
    border:1px solid red;
    box-shadow: 0 0 10px #719ECE;
  }

Answer 2

Il y a un input:focus comme il y a un textarea: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;
    }

Answer 3

Probablement une façon plus appropriée de en changeant La couleur du contour utilise le outline-color Règle CSS.

textarea {
  outline-color: #719ECE;
}

ou pour l'entrée

input {
  outline-color: #719ECE;
}

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

Answer 4

Si simple :

 outline-color : green!important;

l'ensemble du 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;
 }

Answer 5

Cela fonctionnera très bien.

input:focus{
    outline: none;
    border:1px solid red;
}