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

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

.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伪类匹配自身的元素匹配：焦点或具有匹配的后代：焦点。

您可以查看哪些浏览器支持此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，绝对定位，作为边框，......并且不需要脚本。

＆＃13;

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

＆＃13;

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

＆＃13;

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-with

您可以这样做：

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

Answer 6

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

ID  String          Converted
1   30-3/8"         30.375000
2   2-1/16          2.062500
3   9" and 6-1/2"   9 and 6.500000
4   3-3/4 x 3-1/2"  3.750000 x 3.500000

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

6 个答案: