Cách thay đổi màu viền của vùng văn bản trên: focus

Thứ lỗi cho tôi, đây là một câu hỏi ngu ngốc, nhưng tôi cần giúp đỡ. Tôi muốn thay đổi màu đường viền của TEXTAREA trên tiêu điểm. nhưng mã của tôi dường như không hoạt động bình thường.

Vui lòng xem mã trên fiddle .

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

Đây là 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;
}

Có một đầu vào: tiêu điểm vì có một vùng văn bản: tiêu điểm

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

Có lẽ một cách thích hợp hơn để thay đổi màu đường viền là sử dụng outline-colorquy tắc CSS.

textarea {
  outline-color: #719ECE;
}

hoặc cho đầu vào

input {
  outline-color: #719ECE;
}

box-shadow không hoàn toàn giống nhau và nó có thể trông khác với đường viền, đặc biệt nếu bạn áp dụng kiểu tùy chỉnh cho phần tử của mình.

quá đơn giản :

 outline-color : blue !important;

toàn bộ CSS cho nút phản ứng-boostrap của tôi là:

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

bạn chỉ cần trong biến thể scss

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