SCSS – Simple checkbox styling

Styling checkboxes in CSS often requires additional HTML elements or complex workarounds. However, this method simplifies the process by leveraging pseudo-elements directly within the input[type='checkbox'] element, eliminating the need for extra HTML modifications.

SCSS Magic

The magic happens in the SCSS, where custom properties are declared for easy styling. The input[type='checkbox'] is targeted directly, with its ::before and ::after pseudo-elements being used to create the custom checkbox appearance.

[type="checkbox"] {
  --checkbox-size: 18px;
  --checkbox-bg-color: white;
  --checkbox-disabled-bg-color: lightgray;
  --checkbox-check-color: black;
  --checkbox-check-disabled-color: grey;
  --checkbox-border-color: grey;

  display: inline-grid;
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  margin: 0;
  border: 1px solid var(--checkbox-border-color);
  background-color: var(--checkbox-bg-color);
  color: currentColor;
  cursor: pointer;
  appearance: none;
  place-content: center;
  aspect-ratio: 1;

  &::before {
    content: "";
    width: calc(var(--checkbox-size) / 1.5);
    height: calc(var(--checkbox-size) / 1.5);
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    transform: scale(0);
    // transform-origin: bottom left;
    transition: var(--nomotion, transform 0.2s ease-in-out);
    background-color: var(--checkbox-check-color);
  }

  &:focus {
    outline: 1px dashed var(--checkbox-border-color);
    box-shadow: none;
  }

  &:disabled {
    background-color: var(--checkbox-disabled-bg-color);
    &::before {
      color: var(--checkbox-check-disabled-color);
    }
  }

  &:checked {
    &::before {
      transform: scale(1);
    }
  }
}

This approach ensures that the actual checkbox input is hidden visually but remains accessible, while the label is styled to present a visually appealing checkbox.

Advantages

• No Extra HTML: The use of pseudo-elements directly on the input tag means no extra HTML elements are needed to achieve the custom look.
• Customizable: The SCSS contains variables for size, colors, and more, making it easy to tailor the checkbox to fit any design.
• Accessible: The input maintains its accessibility features, ensuring all users can interact with the checkbox.

Customization

The SCSS snippet is designed for easy customization. Update the provided variables to change the size, background, border color, and more:

--checkbox-size: 18px;
--checkbox-bg-color: white;
--checkbox-disabled-bg-color: lightgray;
--checkbox-check-color: black;
--checkbox-check-disabled-color: grey;
--checkbox-border-color: grey;

Code integration

See the Pen Simple checkbox styling by LaTableRouge (@LaTableRouge) on CodePen.