<h1>Pure CSS: custom accessible checkboxes</h1>
<ul>
  <li>
    <input type="checkbox" id="cb1" name="cb1" checked>
    <label for="cb1">Two goats and a cat!</label>
  </li>
  <li>
    <input type="checkbox" id="cb2" name="cb2">
    <label for="cb2">Lorem ipsum dolar set.</label>
  </li>
  <li>
    <input type="checkbox" id="cb3" name="cb3">
    <label for="cb3">I don't know what to write here!</label>
  </li>
</ul>
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=Sen:wght@400;700;800&display=swap");

body {
  background-color: hsl(0, 0%, 91%);
  color: hsla(0, 0%, 27%, 1);
  display: grid;
  font-family: Sen, sans-serif;
  justify-items: center;
  padding: 0.75rem;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

h1 {
  max-width: 20ch;
  text-align: center;
  font-weight: 800;
  font-size: 2.5rem;
  margin: 3rem 0;
  color: hsla(0, 0%, 23%, 1);
  letter-spacing: -0.02em;
}

ul {
  list-style: none;
  margin: 0;
  background: #ffffff;
  padding: 0;

  @media (min-width: 36em) {
    width: 360px;
  }

  li {
    position: relative;
  }
}

input {
  -webkit-appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  border: 1px solid hsl(0, 0%, 85%);
  border-radius: 1px;
  vertical-align: sub;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 1rem;
  outline: none;

  &:checked {
    background-color: hsl(0, 0%, 40%);
    border-color: hsl(0, 0%, 40%);

    & + label {
      text-decoration: line-through;
      color: hsl(0, 0%, 70%);
      font-weight: 600;
      background-color: hsl(0, 0%, 97%);
    }

    &:focus,
    &:hover {
      box-shadow: 0 0 0 3px hsl(0, 0%, 85%);
      border-color: hsl(0, 0%, 40%);
    }
  }

  &:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-image: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnICBmaWxsPSIjZmZmZmZmIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgdmVyc2lvbj0iMS4xIiB4PSIwcHgiIHk9IjBweCI+PHRpdGxlPmljb25fYnlfUG9zaGx5YWtvdjEwPC90aXRsZT48ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz48ZyBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48ZyBmaWxsPSIjZmZmZmZmIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNi4wMDAwMDAsIDI2LjAwMDAwMCkiPjxwYXRoIGQ9Ik0xNy45OTk5ODc4LDMyLjQgTDEwLjk5OTk4NzgsMjUuNCBDMTAuMjI2Nzg5MSwyNC42MjY4MDE0IDguOTczMTg2NDQsMjQuNjI2ODAxNCA4LjE5OTk4Nzc5LDI1LjQgTDguMTk5OTg3NzksMjUuNCBDNy40MjY3ODkxNCwyNi4xNzMxOTg2IDcuNDI2Nzg5MTQsMjcuNDI2ODAxNCA4LjE5OTk4Nzc5LDI4LjIgTDE2LjU4NTc3NDIsMzYuNTg1Nzg2NCBDMTcuMzY2ODIyOCwzNy4zNjY4MzUgMTguNjMzMTUyOCwzNy4zNjY4MzUgMTkuNDE0MjAxNCwzNi41ODU3ODY0IEw0MC41OTk5ODc4LDE1LjQgQzQxLjM3MzE4NjQsMTQuNjI2ODAxNCA0MS4zNzMxODY0LDEzLjM3MzE5ODYgNDAuNTk5OTg3OCwxMi42IEw0MC41OTk5ODc4LDEyLjYgQzM5LjgyNjc4OTEsMTEuODI2ODAxNCAzOC41NzMxODY0LDExLjgyNjgwMTQgMzcuNzk5OTg3OCwxMi42IEwxNy45OTk5ODc4LDMyLjQgWiI+PC9wYXRoPjwvZz48L2c+PC9nPjwvc3ZnPg==");
    background-size: 40px;
    background-repeat: no-repeat;
    background-position: center;
  }

  &:focus,
  &:hover {
    box-shadow: 0 0 0 3px hsl(0, 0%, 92%);
    border-color: hsl(0, 0%, 55%);
  }
}

label {
  padding: 0.75rem 1rem 0.75rem calc(1.2rem * 2.25);
  display: inline-block;
  font-size: 17px;
  width: 100%;
  user-select: none;
  border-bottom: 2px solid hsl(0, 0%, 93%);
  cursor: pointer;

  &:hover {
    border-bottom-color: hsl(0, 0%, 68%);
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.