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

Question

我试图在隐藏输入焦点之前隐藏父伪元素：，它不应该在按钮焦点上工作。目前它看起来像这个

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