相关疑难解决方法(0)

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

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，如果有人可以提供帮助，我将不胜感激！