试图通过〜隐藏输入焦点上的伪元素

Question

我试图隐藏父伪元素 ::before 在输入焦点上隐藏并且它不应该 在按钮焦点上工作。目前看起来像这样

.parent::before{
  content: 'default';
}

.parent:focus-within::before{
  display: none;
}

<div class="parent">
  <input type="text">
  <button>awd</button>
</div>

而且它似乎不起作用。我不想涉及任何js/jquery。如果有任何普通的 css 或至少 scss 解决方案，那就太好了。提前致谢！

Answer 1

你不能用父焦点来控制伪元素，因为按钮和输入都触发父焦点，你不能批准一个而不批准另一个。相反，您可以包装输入来做到这一点。

label::before{
  content: 'default';
}

label:focus-within::before{
  display: none;
}

<div class="parent">
  <label>
     <input type="text">
  </label>
  <button>awd</button>
</div>

Trying to hide pseudo element on input focus through ~