CSS 专注于子元素更改父元素

Question

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

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

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

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

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

Answer 1

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

新的 CSS 伪类:focus-within将有助于此类情况，并有助于人们使用 Tab 进行导航时的可访问性，这在使用屏幕阅读器时很常见。

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

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

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