Html 如何更改文本区域的边框颜色：焦点

原谅我，这是个愚蠢的问题，但我需要帮助。 我想更改焦点上文本区域的边框颜色。但我的代码似乎工作不正常

请查看上的代码

---

有一个输入：焦点，就像有一个文本区域：焦点一样

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

---

改变轮廓颜色的一种更合适的方法可能是使用CSS规则

textarea{
轮廓颜色：#719ECE；
}

或输入

输入{
轮廓颜色：#719ECE；
}

box shadow

不是完全相同的东西，它可能看起来与轮廓不同，特别是如果您将自定义样式应用于元素。

非常简单：

 outline-color : green!important;

我的react boostrap按钮的整个CSS是：

。自定义btn{
字号：1.9em；
背景#2F5BF；
边框：2px实心#78e4ff；
边界半径：3px；
填充：50px 70px；
轮廓颜色：蓝色！重要；
文本转换：大写；
用户选择：自动；
-moz盒阴影：插入0.4pxRGBA（0,0,0,0.2）；
-webkit盒阴影：插入0.4pxRGBA（0,0,0,0.2）；
-webkit边界半径：3px；
-moz边界半径：3px；
}

您只需要在scss变量中

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

---

试试这个也许会有用

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

---

您可以使用CSS的

伪类来实现这一点。伪类用于定义元素的特殊状态

有一个
：：focus
伪类，用于选择具有焦点的元素。
所以你可以像这样把它挂在你的CSS中

使用类

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


.my input:：focus{
轮廓颜色：绿色；
}
您还可以将input:focus更改为.input:focus，因为您已经在textarea上使用了该类。这样就不用额外的选择器了。只是好奇，为什么textareas需要
outline:none
，而普通的文本框输入不需要呢？我认为最好是同时使用outline和shadow“outline:solid 2px#8dc63f；box shadow:0 0 0 21px#8dc63f；”：-）此小提琴链接不存在。这两个规则可以按如下方式组合-
input:focus，textarea:focus{outline:none！重要信息；边框颜色：#719ECE；框阴影：0 0 0 10px#719ECE；}
如果希望对这两种类型的元素都有相同的效果。为边框选择的颜色看起来像默认颜色……是的，但是轮廓不是长方形吗？如果您正在使用border-radius设置按钮/输入的样式，则不太好。浏览器使用轮廓突出显示重点字段以便于访问。我建议尽可能坚持下去。显然，如果您的设计非常具体，您可以自由创建变通方法：）
$input-btn-focus-width:       .05rem !default;

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