CSS 关注子元素更改父元素

Question

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

HTML

<div class="login-form-field">
  <label for="email" class="login-form-label">Email:</label>
  <input class="login-form-input" autofocus="autofocus" type="email" value="" name="user[email]" id="user_email">
</div>

CSS

.login-form-input{
  margin-left: 20px;
  width: 90%;
  outline: none;
  border: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: 0 0 0px 1000px white inset;
}
.login-form-label {
  font-size: 13px;
  font-weight: 300;
  padding-left: 20px;
}
.login-form-field{
  width: 100%;
  border-radius: 0px;
  height: 6rem;
  border: 0.5px solid grey;
  box-shadow: 0px 0px 0px;
}

我已经尝试对父母 select 进行一些更改以及我在谷歌上找到的其他内容。 我得到的最接近的是当鼠标悬停在它上面时用蓝色突出显示：hover，但我需要颜色保持不变，因为我选择了输入。

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

这是JSFiddle ，如果有人可以提供帮助，我将不胜感激

Answer 1

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

新的CSS伪类:focus-within将在这种情况下有所帮助，并且在人们使用制表键进行导航时（在使用屏幕阅读器时很常见）将有助于访问。

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

---

：focus-within伪类匹配元素本身匹配：focus或后代匹配：focus的元素。

您可以检查哪些浏览器支持此http://caniuse.com/#search=focus-within

Answer 2

CSS不支持父级选择。 如果您的目标是使.login-form-field focus带有蓝色边框，那么您将不得不依靠JavaScript添加相应的CSS。

以下CSS：

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

与以下jQuery

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

将实现该目标。 我应该注意，jQuery在这里当然不是必需的。 这就是我更喜欢使用的。

Answer 3

您可以这样做，在其中添加一个额外的div ，它的绝对位置是边框，...，并且不需要脚本。

 .login-form-input { margin-left: 20px; width: 90%; outline: none; } .login-form-label { font-size: 13px; font-weight: 300; padding-left: 20px; } .login-form-field { position: relative; width: 100%; border-radius: 0px; height: 6rem; box-shadow: 0px 0px 0px; } .login-form-field input ~ .login-form-field-border { position: absolute; left: 0; top: 0; width: 100%; height: 100%; box-sizing: border-box; border: 0.5px solid grey; z-index: -1 } .login-form-field input:focus ~ .login-form-field-border { border: 2px solid blue; } 

 <div class="login-form-field"> <label for="email" class="login-form-label">Email:</label> <input class="login-form-input" autofocus="autofocus" type="email" value="" name="user[email]" id="user_email"> <div class="login-form-field-border"></div> </div> 

Answer 4

用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", "" );
    });

});

Answer 5

虽然这是一个古老的答案。 我正在回答这个问题，因此任何登陆这里的人都可以仅使用CSS来实现这一目标。

使用CSS3伪元素： focus-within

您可以这样做：

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

Answer 6

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

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