CODEWITHSUNDEEP
cssreactjsstyled-components
user13909231
user13909231

Reputation:

Not able to apply the Focus styles to styled component

I am trying to apply focus style to input of text but not able to apply the same.I referred to other questions and Tried putting in outline: none to override the user stylesheet but that doesn't have any effect.

export const InputBox = styled.input`
  display: flex;
  width: 45%;
  height: 2em;
  margin-top: 1em;
  background: linear-gradient(
    360deg,
    #b0a7e6 0%,
    rgba(176, 167, 230, 0) 169.23%
  );
  border-radius: 5px;
  border: 2px solid lavender;
  color: #6e5dcc;
  & :focus {
outline:none
    border: 2px solid green;
  }
`;

Upvotes: 0

Views: 541

Answers (2)

Vijay208
Vijay208

Reputation: 177

Try this. it will worked:

export const InputBox = styled.input`
  /* This renders the input above... Edit  */
    display: flex;
  width: 45%;
  height: 2em;
  margin-top: 1em;
  background: linear-gradient(
    360deg,
    #b0a7e6 0%,
    rgba(176, 167, 230, 0) 169.23%
  );
  border-radius: 5px;
  border: 2px solid lavender;
  color: #6e5dcc;
  &:focus {
outline:none
    border: 2px solid green;
  } `}
`

render(
  <div>
<input name="name" type="text"/>
    <Button target="_blank" primary>click</Button>

  </div>
)

Upvotes: 0

Rokata
Rokata

Reputation: 1229

You have a space between & and :focus. I changed it to &:focus and it worked for me on the sandbox.

Upvotes: 1

Related Questions