Css 如何获取边框以更改输入焦点中的颜色

请参阅此代码：

$（文档）.ready（函数（）{
$（“.toggle password”）。单击（函数（）{
$（this.toggleClass（“fa-eye-fa-eye-slash”）；
变量输入=$（$（this.attr（“切换”））；
if（input.attr（“type”）=“password”）{
input.attr（“类型”、“文本”）；
}否则{
输入属性（“类型”、“密码”）；
}
});
});
.input group.field图标{
光标：指针；
填充顶部：10px；
右边填充：10px；
对齐项目：居中；
边框顶部：1px实心#ced4da；
边框底部：1px实心#ced4da；
}
.input group append、.input group text{
左边框：1px虚线#ced4da！重要；
}

管理员3 |登录
登录以启动会话
记得我吗
登录
-或-





希望这会有所帮助。我直接瞄准了左边的方块，比如
。登录卡体。输入组。表单控件：focus~。输入组append。字段图标

但是，如果您为这个跨度指定一个唯一的id或类名，则会更好


$（文档）.ready（函数（）{
$（“.toggle password”）。单击（函数（）{
$（this.toggleClass（“fa-eye-fa-eye-slash”）；
变量输入=$（$（this.attr（“切换”））；
if（input.attr（“type”）=“password”）{
input.attr（“类型”、“文本”）；
}否则{
输入属性（“类型”、“密码”）；
}
});
});
.input group.field图标{
光标：指针；
填充顶部：10px；
右边填充：10px；
对齐项目：居中；
边框顶部：1px实心#ced4da；
边框底部：1px实心#ced4da；
}
.input group append、.input group text{
左边框：1px虚线#ced4da！重要；
}
.login卡体.输入组.表单控件：focus~.输入组append.字段图标{
边框顶部：1px实心#80bdff；
边框底部：1px实心#80bdff；
}

管理员3 |登录
登录以启动会话
记得我吗
登录
-或-





我不清楚您的问题，但根据我的理解，我建议您给密码字段一个id，以便在DOM上访问它，然后您可以应用：hover类。如果您澄清您的question@RinkeshGolwala这不是功能问题，而是视觉问题。请在密码输入字段内单击并查看控件的边框。你会立即注意到问题的。是的，我看到了这个问题。但是css正在迫使这一点
.input group.field图标
正在强制设置不同的边框。这正是问题所在。我该怎么做呢。请注意，最右边的正方形确实将边框绘制为蓝色（并且它也将边框强制为灰色），因此没有一个：焦点修改器将其重新绘制为蓝色（请注意，正方形位于输入控件之外，因此：焦点修改器将不起作用），因此我认为有一个很好的方法来完成它，即，当输入焦点位于控件中时，将边框绘制为蓝色。谢谢。它做到了。我找不到右边正方形的边框颜色在哪里变化。