Styled components select previous sibling

Question

I am building a form and I am trying to change the colour of the label once the input is focused. I am using styled components reference api, and I see it works if I have my markup as input followed by the label, which is not my case. my markup is

<FieldWrapper>
  <StyledLabel htmlFor={id && id}>{label}</StyledLabel>
  <StyledInput
    type={type}
    id={id && id}
    autoComplete={autoComplete}
    {...rest}
  />
</FieldWrapper>

and my styled components file is like:

const FieldWrapper = styled.div`
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  position:relative;
  & ${StyledInput}:focus + ${StyledLabel} {
   color: red;
  }
`;

is there a way to achieve that not having to change the order of the markup ? Looks counterintuitive from the markup perspective having the input before the label.

Thanks.

Answer 1

First of all you need to put input before label. You can use flex-direction:row-reverse; to display label before input. Then, don't use reference variables ${StyledLabel}, just use input and label, like in this example:

<FieldWrapper>
  <StyledInput
    type={type}
    id={id && id}
    autoComplete={autoComplete}
    {...rest}
  />
  <StyledLabel htmlFor={id && id}>{label}</StyledLabel>
  
</FieldWrapper>

and then in the styles:

const FieldWrapper = styled.div`

  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
  width: 100%;
  position:relative;

  input:focus ~ label{
    color: green;
  }
  
`;