CODEWITHSUNDEEP
cssstyled-components
Nika Roffy
Nika Roffy

Reputation: 941

On focus of div change background to gray with styled-components

I have this div in styled components

   const StyledDots = styled.div`
  width: 16px;
  height: 16px;
  border: solid 1px #d2d2d2;
  border-radius: 20px;
  background-color: #ffffff;
  position: relative;
  top: 50px;
  right: 15px;

  ::focus {
    background: black;
  } `

I tried to change background color to gray with focus but as you see I'm doing something wrong and i Dont know what,Any suggestions please?

(Would be better if only 50% of the div will change the color)

Upvotes: 0

Views: 227

Answers (1)

chawki challadia
chawki challadia

Reputation: 454

to change style onHover, onFocus, ...etc with styled components you need to use this syntax:

&:focus {
    background: black;
  }

for background to be 50% of the height you can use linear-gradient to set the background color:

&:focus {
    background: linear-gradient(180deg, black 50%, white 50%);
  }

Upvotes: 1

Related Questions