Javascript CSS关注子元素更改父元素

我想设计一个表单的样式，在表单字段中有标签和输入，当我在输入中写东西时（可能有焦点），我希望边框用蓝色点亮。现在我有这样的东西：

.login-form-input:focus {
  border:1px solid blue;
}

HTML

我已经试着选择家长做一些改变，以及在谷歌上找到的其他东西。我得到的最接近的颜色是当鼠标在上面时用蓝色高亮显示：hover，但我需要颜色保持我选择的输入

.login-form-field:hover {
  border-color: blue !important;
}

---

这是我的礼物，如果有人能帮我，我将不胜感激

如果要在输入处于活动状态时提供边框颜色，可以这样添加：

.login-form-input:focus {
  border:1px solid blue;
}

---

CSS对父项选择没有本机支持。如果您的目标是让

.login表单字段

在

焦点

上有一个蓝色边框，那么您必须依靠JavaScript来添加相应的CSS

以下CSS:

.login-form-field.highlight {
  border-color: blue;
}

使用以下jQuery

$('.login-form-field').hover(function() {
    $(this).toggleClass('highlight');
});

---

我们将实现这一目标。我应该注意到jQuery在这里肯定不是必需的；这正是我喜欢使用的。

您可以这样做，添加一个额外的

div

，绝对定位，充当边框。。。而且不需要脚本

。登录表单输入{
左边距：20px；
宽度：90%；
大纲：无；
}
.登录表单标签{
字体大小：13px；
字体大小：300；
左侧填充：20px；
}
.登录表单字段{
位置：相对位置；
宽度：100%；
边界半径：0px；
身高：6雷姆；
盒影：0px 0px 0px；
}
.login表单字段输入~.login表单字段边框{
位置：绝对位置；
左：0；
排名：0；
宽度：100%；
身高：100%；
框大小：边框框；
边框：0.5px纯灰；
z指数：-1
}
.登录表单字段输入：焦点~.登录表单字段边框{
边框：2件纯蓝；
}

电邮：

使用jquery进行反应：

$( document ).ready(function() {
    console.log( "ready!" );

    $('.login-form-input').focus(function() {
         $(this).parent().css( "border", "#99f 2px solid" );
    });

    $('.login-form-input').focusout(function() {
         $(this).parent().css( "border", "" );
    });

});

---

您现在可以在纯CSS中执行此操作，因此不需要JavaScript

新的CSS伪类

：focus in

将有助于此类情况，并将有助于人们使用选项卡导航时的可访问性，这在使用屏幕阅读器时很常见

.login-form-field:focus-within {
  border-color: blue !important;
}

---

pseudo类中的：focus与元素本身匹配 匹配：焦点或具有匹配：焦点的子体的

---

您可以检查哪些浏览器支持此选项，尽管这是一个古老的答案。我在回答这个问题，所以任何登陆这里的人都可以使用CSS来实现这一点

使用CSS3伪元素：

在

你可以做：

form:focus-within {
  border-color: blue !important;
}

---

@尼科尔：是的；对于一个更具体的事件，我可能会使用类似于

$（'.login form input'）.focus（function（）{$（this）.parent（）.addClass（'highlight'）；}.blur（function（）{$（this）.parent（）.removeClass（'highlight'）；}）因为只有在准确的
输入时才会触发。谢谢您的帮助！jsfiddle.net/7AaDc/220谢谢您的帮助！它工作了，而且根本没有弄乱代码，我想我可以在css中完成它，而不会弄乱。哈哈哈！谢谢你的帮助！没有
焦点与
！！
form:focus-within {
  border-color: blue !important;
}