Trying to hide pseudo element on input focus through ~-CodePudding

I'm trying to hide parents pseudo element ::before hide on input focus and it shouldn't work on button focus. Currently it looks like this

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

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

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

and it doesn't seem to work. I don't want to involve any js/jquery. Would be great if there any vanila css or atleast scss solution. Thanks in advance!

CodePudding user response：

You can't do that with parent focus to control pseudo element, cause button and input both trigger focus on parent, you can't approve one and disapprove another. Instead, you can wrap input to do that.

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

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

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