Customize checkbox only using css

checkbox.tsx

import styled from "styled-components";

const Checkbox = styled.input.attrs(() => ({
    type: 'checkbox'
}))`
  appearance: none;
  background-color: #ffffff;
  border: 1px solid #000000;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
  padding: 8px;
  border-radius: 3px;
  display: inline-block;
  position: relative;
  
  &:active {
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
  }
  
  &:checked {
      background-color: #000000;
      border: 1px solid #000000;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
      color: #ffffff;
  }
  
  &:checked:after {
      content: '\\2714';
      font-size: 14px;
      position: absolute;
      top: 0px;
      left: 3px;
      color: #ffffff;
  }
`;

export default Checkbox;