css - 当使用 CSS/SCSS 聚焦其中的输入时，我可以在元素之后更新父元素的样式吗？

Question

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

设计意味着我需要使用一个 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;
        } 
    }
}

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