Modern Pure CSS Custom Checkboxes & Radio Buttons

Enhance your web forms with this collection of modern, pure CSS custom checkboxes and radio buttons. Features multiple styles and color variations (blue, green, red, orange, grey) for a clean and consistent UI. No JavaScript required, easy to implement and customize.

#css

#checkbox

#radio button

#custom style

#pure css

#form input

#ui element

#modern design

#multiple colors

#accessible forms

/HTML *CSS ()JS Output Live Updates

html, body {
  background-color: #f4f7f9;
}

/* ==== Global Showcase Styles ==== */
.cr-showcase-container {
  padding: 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #333;
}
.cr-section-title {
  font-size: 1.6em;
  color: #2c3e50;
  margin-top: 30px;
  margin-bottom: 15px;
  padding-bottom: 8px;
}
.cr-section {
  display: flex;
  flex-direction: column; /* Stack controls vertically */
  gap: 15px; /* Space between controls */
  background-color: #ffffff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 3px 12px rgba(0, 50, 100, 0.06);
}

/* ==== Base Control Styles (Shared by Checkbox & Radio) ==== */
.cr-control {
  position: relative;
  display: flex; /* Align indicator and text */
  align-items: center;
  padding-left: 30px; /* Space for the custom indicator */
  cursor: pointer;
  font-size: 1rem;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  min-height: 20px; /* Ensure label is clickable even if text is short */
}

/* Hide the browser default input */
.cr-control input[type="checkbox"],
.cr-control input[type="radio"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* The custom indicator (the box/circle) */
.cr-indicator {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background-color: #e9ecef; /* Default background for unchecked */
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Checked state: Changes background of the indicator */
.cr-control input:checked ~ .cr-indicator {
  border-color: transparent; /* Border color often matches background or is removed */
}

/* Hover state for unchecked controls */
.cr-control:hover input:not(:checked) ~ .cr-indicator {
  background-color: #dee2e6;
  border-color: #868e96;
}

/* Focus state for accessibility */
.cr-control input:focus-visible ~ .cr-indicator {
  outline: 2px solid #007bff; /* Default focus outline */
  outline-offset: 1px;
}

/* ==== Checkbox Style 1: Square with Tick Mark (cr-cb-square-tick) ==== */
.cr-cb-square-tick .cr-indicator {
  width: 20px;
  height: 20px;
  border-radius: 4px;
}
/* Create the tick mark using ::after pseudo-element */
.cr-cb-square-tick .cr-indicator::after {
  content: "";
  position: absolute;
  display: none; /* Hidden by default */
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid white; /* Tick color */
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
.cr-cb-square-tick input:checked ~ .cr-indicator::after {
  display: block;
}

/* ==== Checkbox Style 2: Rounded Filled (cr-cb-rounded-fill) ==== */
.cr-cb-rounded-fill .cr-indicator {
  width: 20px;
  height: 20px;
  border-radius: 50%; /* Rounded checkbox */
}
/* Simple fill, no separate tick mark needed for this style */
/* The background color change on :checked is enough */
.cr-cb-rounded-fill input:checked ~ .cr-indicator::after {
    content: ""; /* Can add a smaller inner dot if desired */
    position: absolute;
    display: block;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 8px; height: 8px;
    background-color: white;
    border-radius: 50%;
}

/* ==== Radio Button Style 1: Classic Dot (cr-rb-classic) ==== */
.cr-rb-classic .cr-indicator {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}
/* Create the inner dot using ::after pseudo-element */
.cr-rb-classic .cr-indicator::after {
  content: "";
  position: absolute;
  display: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px; /* Size of the inner dot */
  height: 10px;
  border-radius: 50%;
  background-color: white; /* Dot color (usually contrasts with indicator bg) */
}
.cr-rb-classic input:checked ~ .cr-indicator::after {
  display: block;
}

/* ==== Radio Button Style 2: Ring Indicator (cr-rb-ring) ==== */
.cr-rb-ring .cr-indicator {
  width: 18px; /* Slightly smaller base */
  height: 18px;
  border-radius: 50%;
  background-color: transparent; /* Transparent base */
  border-width: 2px; /* Thicker border for the ring itself */
}
.cr-rb-ring .cr-indicator::after {
  content: "";
  position: absolute;
  display: none;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 8px; /* Inner dot size */
  height: 8px;
  border-radius: 50%;
  /* Background color set by color classes */
}
.cr-rb-ring input:checked ~ .cr-indicator::after {
  display: block;
}
.cr-rb-ring input:checked ~ .cr-indicator {
  background-color: transparent; /* Keep background transparent */
}

/* ==== Color Variations for :checked state ==== */
/* Blue */
.cr-blue input:checked ~ .cr-indicator { background-color: #2196F3; border-color: #2196F3; }
.cr-radio.cr-rb-ring.cr-blue input:checked ~ .cr-indicator { border-color: #2196F3; }
.cr-radio.cr-rb-ring.cr-blue input:checked ~ .cr-indicator::after { background-color: #2196F3; }
.cr-blue input:focus-visible ~ .cr-indicator { outline-color: #64b5f6; }

/* Green */
.cr-green input:checked ~ .cr-indicator { background-color: #4CAF50; border-color: #4CAF50; }
.cr-radio.cr-rb-ring.cr-green input:checked ~ .cr-indicator { border-color: #4CAF50; }
.cr-radio.cr-rb-ring.cr-green input:checked ~ .cr-indicator::after { background-color: #4CAF50; }
.cr-green input:focus-visible ~ .cr-indicator { outline-color: #81c784; }

/* Red */
.cr-red input:checked ~ .cr-indicator { background-color: #f44336; border-color: #f44336; }
.cr-radio.cr-rb-ring.cr-red input:checked ~ .cr-indicator { border-color: #f44336; }
.cr-radio.cr-rb-ring.cr-red input:checked ~ .cr-indicator::after { background-color: #f44336; }
.cr-red input:focus-visible ~ .cr-indicator { outline-color: #e57373; }

/* Orange */
.cr-orange input:checked ~ .cr-indicator { background-color: #ff9800; border-color: #ff9800; }
.cr-radio.cr-rb-ring.cr-orange input:checked ~ .cr-indicator { border-color: #ff9800; }
.cr-radio.cr-rb-ring.cr-orange input:checked ~ .cr-indicator::after { background-color: #ff9800; }
.cr-orange input:focus-visible ~ .cr-indicator { outline-color: #ffb74d; }

/* Grey */
.cr-grey input:checked ~ .cr-indicator { background-color: #78909c; border-color: #78909c; } /* Using a slightly more distinct grey for ON */
.cr-radio.cr-rb-ring.cr-grey input:checked ~ .cr-indicator { border-color: #78909c; }
.cr-radio.cr-rb-ring.cr-grey input:checked ~ .cr-indicator::after { background-color: #78909c; }
.cr-grey input:focus-visible ~ .cr-indicator { outline-color: #b0bec5; }

<h3 class="cr-section-title">Square Checkboxes (Tick Mark)</h3>
  <div class="cr-section">
    <label class="cr-control cr-checkbox cr-cb-square-tick cr-blue">
      <input type="checkbox" checked>
      <span class="cr-indicator"></span> Blue Checkbox
    </label>
    <label class="cr-control cr-checkbox cr-cb-square-tick cr-green">
      <input type="checkbox" checked>
      <span class="cr-indicator"></span> Green Checkbox
    </label>
    <label class="cr-control cr-checkbox cr-cb-square-tick cr-red">
      <input type="checkbox" checked>
      <span class="cr-indicator"></span> Red Checkbox
    </label>
    <label class="cr-control cr-checkbox cr-cb-square-tick cr-orange">
      <input type="checkbox">
      <span class="cr-indicator"></span> Orange Checkbox
    </label>
    <label class="cr-control cr-checkbox cr-cb-square-tick cr-grey">
      <input type="checkbox" checked>
      <span class="cr-indicator"></span> Grey Checkbox
    </label>
  </div>

<h3 class="cr-section-title">Rounded Checkboxes (Filled)</h3>
  <div class="cr-section">
    <label class="cr-control cr-checkbox cr-cb-rounded-fill cr-blue">
      <input type="checkbox" checked>
      <span class="cr-indicator"></span> Blue Rounded
    </label>
    <label class="cr-control cr-checkbox cr-cb-rounded-fill cr-green">
      <input type="checkbox" checked>
      <span class="cr-indicator"></span> Green Rounded
    </label>
    <label class="cr-control cr-checkbox cr-cb-rounded-fill cr-red">
      <input type="checkbox">
      <span class="cr-indicator"></span> Red Rounded
    </label>
    <label class="cr-control cr-checkbox cr-cb-rounded-fill cr-orange">
      <input type="checkbox" checked>
      <span class="cr-indicator"></span> Orange Rounded
    </label>
    <label class="cr-control cr-checkbox cr-cb-rounded-fill cr-grey">
      <input type="checkbox" checked>
      <span class="cr-indicator"></span> Grey Rounded
    </label>
  </div>

<h3 class="cr-section-title">Classic Radio Buttons (Dot)</h3>
  <div class="cr-section">
    <label class="cr-control cr-radio cr-rb-classic cr-blue">
      <input type="radio" name="radioGroup1" checked>
      <span class="cr-indicator"></span> Blue Radio
    </label>
    <label class="cr-control cr-radio cr-rb-classic cr-green">
      <input type="radio" name="radioGroup1">
      <span class="cr-indicator"></span> Green Radio
    </label>
    <label class="cr-control cr-radio cr-rb-classic cr-red">
      <input type="radio" name="radioGroup2" checked> 
      <span class="cr-indicator"></span> Red Radio
    </label>
    <label class="cr-control cr-radio cr-rb-classic cr-orange">
      <input type="radio" name="radioGroup2">
      <span class="cr-indicator"></span> Orange Radio
    </label>
    <label class="cr-control cr-radio cr-rb-classic cr-grey">
      <input type="radio" name="radioGroup1">
      <span class="cr-indicator"></span> Grey Radio
    </label>
  </div>

<h3 class="cr-section-title">Radio Buttons (Ring Indicator)</h3>
  <div class="cr-section">
    <label class="cr-control cr-radio cr-rb-ring cr-blue">
      <input type="radio" name="radioGroup3" checked>
      <span class="cr-indicator"></span> Blue Ring Radio
    </label>
    <label class="cr-control cr-radio cr-rb-ring cr-green">
      <input type="radio" name="radioGroup3">
      <span class="cr-indicator"></span> Green Ring Radio
    </label>
  </div>

</div>