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>

使用CSS / SCSS集中元素内部的输入后，是否可以更新元素后的父元素样式？

1 个答案: