So ändern Sie die Rahmenfarbe des Textbereichs auf: Fokus

Verzeih mir, das ist eine dumme Frage, aber ich brauche Hilfe. Ich möchte die Rahmenfarbe von TEXTAREA im Fokus ändern. aber mein Code scheint nicht richtig zu funktionieren.

Bitte sehen Sie sich den Code auf der Geige an .

<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>

Hier ist das 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;
}

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

Es gibt eine Eingabe: Fokus, da es einen Textbereich gibt: Fokus

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;
}

Eine wahrscheinlich geeignetere Methode zum Ändern der Umrissfarbe ist die Verwendung der outline-colorCSS-Regel.

textarea {
  outline-color: #719ECE;
}

oder zur Eingabe

input {
  outline-color: #719ECE;
}

box-shadow ist nicht ganz dasselbe und sieht möglicherweise anders aus als der Umriss, insbesondere wenn Sie Ihrem Element ein benutzerdefiniertes Styling zuweisen.

so einfach :

 outline-color : blue !important;

Das gesamte CSS für meinen React-Boostrap-Button lautet:

.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;
}

Sie brauchen nur in scss varible

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