CSS焦点子元素更改父元素

我想要样式表单中具有标签和输入表单字段内，当我将写入输入内容（可能与焦点），我希望边界点亮与一些蓝色。现在，我有这样的事情：CSS焦点子元素更改父元素

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

来源

2016-07-28 Raven the Bard

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

});

来源

2016-07-28 19:26:52

jsfiddle.net/7AaDc/220 – 2016-07-28 21:54:57

感谢您的帮助！它的工作，并没有搞砸了代码，我想我可以做到这一点，而不会让一团糟哈哈 –

-3

，如果你想给的边框颜色时输入有效，你可以添加这样的：

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

来源

2016-07-28 19:17:06

CSS没有为父母选择的原生支持。如果您的目标是在focus上有.login-form-field的蓝色边框，您将不得不依靠JavaScript来添加相应的CSS。

下面的CSS：

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

用下面的jQuery

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

将实现这一目标。我应该注意到jQuery在这里当然没有必要;这正是我喜欢使用的。

来源

2016-07-28 19:18:26

我想你确实意味着'焦点（）'，对吧？ – nicael

@nicael是;对于更具体的事件，我可能会使用'$（'。login-form-input'）行中的某些内容。 }）。blur（function（）{$（this）.parent（）。removeClass（'highlight'）;}）;'因为这只会触发确切的'input'焦点。 –

感谢您的帮助！ –

你可以这样做，在那里你增加一个额外的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>

来源

2016-07-28 19:24:09 LGSon

感谢您的帮助！ –

现在，您可以在纯CSS这样做，所以不需要的JavaScript。

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

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

的：对焦内伪类匹配元件，要么本身匹配：焦点或具有后代，其匹配：焦点。

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

来源

2017-08-14 12:30:39

CSS焦点子元素更改父元素

回答

相关问题