汉堡菜单不适用于样式化的组件

Question

I'm really confused why it is not working. I am using styled-components library and actually I've got a problem with hamburger menu. It changes only when the checkbox is shown. It should work with only css but its not do have any suggestions?

const HamburgerCnt = styled.div`
  cursor: pointer;
  position: absolute;
  top: 35px;
  right: 41px;
  height: 28px;
  width: 30px;

  input {
    display: none;
  }

  input + label {
    position: absolute;
    top: 12px;
    right: 0px;
    width: 30px;
    height: 2px;
    background: #fff;
    display: block;
    transform-origin: center;
    transition: .5s ease-in-out;
    &:after,
    &:before {
      transition: .5s ease-in-out;
      content: "";
      position: absolute;
      display: block;
      width: 100%;
      height: 100%;
      background: #fff;
    }
    &:before {
      top: -10px;
    }
    &:after {
      bottom: -10px;
    }
  }

  input:checked + label {
    transform: rotate(45deg);
    &:after {
      transform: rotate(90deg);
      bottom: 0;
    }
    &:before {
      transform: rotate(90deg);
      top: 0;
    }
  }
`;

and Component looks like this

<HamburgerCnt>
      <input type="checkbox" name="check" />
      <label htmlFor="check" />
</HamburgerCnt>

Answer 1

You should use check as id of the input, not its name.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#Using_the_for_attribute