I'm looking to modify the properties of my parent component's :after selector whenever the child element is focused. It seemed straightforward at first, but for some reason, I just can't seem to make it work.
Here's a glimpse of my component structure:
Component Structure:
<Wrapper>
<Input type='text'/>
</Wrapper>
Specifications:
const Wrapper = styled.div`
&:after {
display: block;
content: "";
border-bottom: solid 3px black;
transform: scaleX(0);
transition: transform 250ms ease-in-out;
}
`
const Input = styled.input`
border: none;
width: 90%;
transform-origin: center;
display: inline-block;
:focus {
outline: none;
border-bottom: 1px solid black;
}
&:focus ${Wrapper}:after {
transform: scaleX(1);
}
`
I want the parent component to show a border-bottom when the child is focused, and remove it when the child loses focus. Any suggestions on how I can accomplish this? What am I overlooking or doing incorrectly?
Any assistance would be greatly appreciated.