CSS 关注子元素改变父元素

Posted 2023-03-06

【中文标题】CSS 关注子元素改变父元素

【英文标题】：CSS focus on child element change a parent element

【发布时间】：2016-12-03 08:12:30

【问题描述】：

我想在表单域内设置一个带有标签和输入的表单，当我在输入中写一些东西（可能有焦点）时，我希望边框以一些蓝色点亮。现在我有这样的东西：

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

【参考方案1】：

虽然这是一个旧答案。我正在回答这个问题，所以任何登陆这里的人都可以只使用 CSS 来实现这一点。

使用 CSS3 伪元素：focus-within

你可以这样做：

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

【讨论】：

没有focus-with！！

【参考方案2】：

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

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

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

---

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

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

【参考方案3】：

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

);

【讨论】：

jsfiddle.net/7AaDc/220

感谢您的帮助！它有效并且根本没有弄乱代码，我认为我可以在 css 中做到这一点而不会弄得一团糟哈哈

【参考方案4】：

您可以这样做，在其中添加一个额外的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>

【讨论】：

感谢您的帮助！

【参考方案5】：

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。这正是我喜欢使用的。

【讨论】：

@nicael 是的；对于更具体的事件，我可能会使用类似于$('.login-form-input').focus(function() $(this).parent().addClass('highlight'); ).blur(function() $(this).parent().removeClass('highlight'); ); 的东西，因为这只会在确切的input 焦点上触发。

感谢您的帮助！

【参考方案6】：

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

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