当元素内部的输入使用 CSS/SCSS 聚焦时，我可以在元素之后更新父元素的样式吗？答案

【问题标题】：Can I update the style of the parents after element when an input inside it is focused using CSS/ SCSS?当元素内部的输入使用 CSS/SCSS 聚焦时，我可以在元素之后更新父元素的样式吗？
【发布时间】：2019-10-14 12:53:49
【问题描述】：

当元素内部的输入被聚焦时，我可以在元素之后更新父元素的样式吗？

该设计意味着我需要使用 after 元素而不是为输入设置边框样式，但是当输入聚焦时我需要更新 after 元素的背景颜色。我可以只使用 SCSS / CSS 做到这一点吗？

HTML

<div class="subscribe__wrapper">
    <div class="subscribe__input">
        <input class="mr-medium" type="email" id="fields-emailAdress" required name="fields[email]"
            placeholder="Your email address">
    </div>
    <button class="next btn-rounded btn-rounded--small ml-min">
    </button>
</div>

SCSS

.subscribe__wrapper {
position: relative;
&:after {
      content: '';
      left: 0;
      right: 0;
      bottom: 0;
      height: 2px;
      background: $border-color;
      position: absolute; 
    }
}

.subscribe__wrapper input:focus {
  .subscribe__wrapper & {
     &:after {
          background: red;
        } 
    }
}

【问题讨论】：

嗯，这似乎有点棘手——我不确定是否可以使用当前的元素层次结构完全满足您的需求。你可以使用.subscribe__wrapper:focus-within:after {}，但是当任何可聚焦的孩子处于焦点时，它会应用焦点样式，包括按钮。如果将:after 样式移到subscribe__input 类中，则可以更可靠地使用focus-within，因为那里只有一个可聚焦元素
相关：stackoverflow.com/q/39374918/3597276

标签： css input sass css-selectors pseudo-element

【解决方案1】：

使用纯 CSS 和您当前的标记，不，这是不可能的。 See this related question.

不过，正如该问题的已接受答案中所建议的那样，您可以修改标记以在输入之后添加另一个元素，然后在输入处于焦点时使用同级选择器（+ 或 ~）对其进行样式设置.这个新元素将具有背景，而不是将其放在 .subscribe__wrapper 的伪元素上。

例如：

.subscribe__wrapper {
  position: relative;
  z-index: 0;
  padding: 12px;
  border: 2px solid blue;
}

.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.subscribe__wrapper input:focus + .background {
  background-color: red;
}

<div class="subscribe__wrapper">
  <div class="subscribe__input">
    <input class="mr-medium" type="email" id="fields-emailAdress" required name="fields[email]" placeholder="Your email address">
    <div class="background"></div>
  </div>
  <button class="next btn-rounded btn-rounded--small ml-min"></button>
</div>

【讨论】：