Попытка скрыть псевдоэлемент в фокусе ввода через ~
Я пытаюсь скрыть псевдоэлемент родителей :: перед тем, как скрыть фокус ввода, и он не должен работает с фокусом кнопки. В настоящее время это выглядит так
.parent::before{
content: 'default';
}
.parent:focus-within::before{
display: none;
}<div class = "parent">
<input type = "text">
<button>awd</button>
</div>и это, кажется, не работает. Я не хочу использовать какие-либо js/jquery. Было бы здорово, если бы было какое-нибудь ванильное решение css или хотя бы scss. Заранее спасибо!
@Jared Я обновил свой вопрос, на этот вопрос был ответ, а затем я обновил скрипку, так как у меня возникла другая проблема с предложенным решением: focus-within. Парень, который ответил на мой вопрос здесь, сказал, что обновит свой ответ, но вместо этого просто удалил его.
То, что вы хотите, не может быть достигнуто с вашей текущей структурой HTML. Вы не можете исключить потомков из срабатывания :focus-within. Вам придется сделать кнопку не потомком элемента, на котором вы устанавливаете фокус внутри.
Ответы 1
Вы не можете сделать это с родительским фокусом, чтобы управлять псевдоэлементом, вызвать кнопку и ввести оба триггерных фокуса на родителя, вы не можете одобрить один и отклонить другой. Вместо этого вы можете обернуть ввод, чтобы сделать это.
label::before{
content: 'default';
}
label:focus-within::before{
display: none;
}<div class = "parent">
<label>
<input type = "text">
</label>
<button>awd</button>
</div>
Ваш код работает для меня, как и ожидалось. Какой браузер вы используете?