How to style an <input> element on focus using styled components?

Question

Here is my styled component:

const StyledInput = styled.input`
    width: 90%;
    padding: grey;
    border: 0px;
    font-size: 12px;
    &:input:focus {
        outline: none;
        box-shadow: 0px 0px 2px red;
    }
`;

And the implementation:

 <StyledInput
     autoFocus={true}
     type="text"
     onChange={this.handleChange}
     placeholder={this.props.placeHolder}
 />

But the borders are not changing to red when focused (keep the default Chrome blue). How can I change the input borders on focus?

Answer 1

Change &:input:focus { to &:focus {:

const StyledInput = styled.input`
    width: 90%;
    padding: grey;
    border: 0px;
    font-size: 12px;
    &:focus {
        outline: none;
        box-shadow: 0px 0px 2px red;
    }
`;

As isherwood pointed out:

you're essentially doubling up on the input portion of your selector as you have it now.