Bun

First unchecked checkbox

Second checked checkbox

Third unchecked & disabled checkbox

Fourth checked & disabled checkbox

First unchecked radio

Second checked radio

Third unchecked & disabled radio

Fourth checked & disabled radio

Tips

It's recommended to use keyboard arrows to set range values.
You can change range values 10x faster if you hold shift with the arrows.

Generator Settings

Content

Text content

Line height

Font size

rem

Input

Padding left

rem

Margin bottom

rem

Height

rem

Width

rem

Border width

Background color

Border color

Checkbox

Border radius

rem

Interaction

Background color

Border color

Checked

Background color

Border color

Interaction

Background color

Border color

Checkmark

Left

Top

Width

rem

Height

rem

Color

Thickness

Disabled

Color

Radio

Border radius

rem

Interaction

Background color

Border color

Checked

Background color

Border color

Interaction

Background color

Border color

Bull

Left

Top

Width

rem

Height

rem

Color

Border radius

rem

Disabled

Color

Disabled

Opacity

Ring

Color

Thickness

Classes

Classes prefix

HTML body

<label class="b-contain">
  <span>This is a checkbox</span>
  <input type="checkbox" />
  <div class="b-input"></div>
</label>

<label class="b-contain">
  <span>This is a radio</span>
  <input name="radio" type="radio" />
  <div class="b-input"></div>
</label>

CSS style

.b-contain *,
.b-contain *::before,
.b-contain *::after {
  box-sizing: content-box !important;
}

.b-contain input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

.b-contain span {
  line-height: 1.5;
  font-size: 1rem;
  font-family: inherit;
}

.b-contain {
  display: table;
  position: relative;
  padding-left: 2rem;
  cursor: pointer;
  margin-bottom: 0.4rem;
}

.b-contain input[type="checkbox"] ~ .b-input {
  position: absolute;
  top: 0;
  left: 0;
  height: 1.25rem;
  width: 1.25rem;
  background: #f1f5f9;
  transition: background 250ms;
  border: 1px solid #94a3b8;
  border-radius: 0.2rem;
}

.b-contain input[type="radio"] ~ .b-input {
  position: absolute;
  top: 0;
  left: 0;
  height: 1.25rem;
  width: 1.25rem;
  background: #f1f5f9;
  transition: background 250ms;
  border: 1px solid #94a3b8;
  border-radius: 3rem;
}

.b-contain input[type="checkbox"] ~ .b-input::after {
  content: "";
  position: absolute;
  display: none;
  left: 7px;
  top: 3px;
  width: 0.3rem;
  height: 0.6rem;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transition: background 250ms;
  transform: rotate(45deg);
}

.b-contain input[type="radio"] ~ .b-input::after {
  content: "";
  position: absolute;
  display: none;
  left: 4px;
  top: 4px;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 3rem;
  background: #ffffff;
  transition: background 250ms;
}

.b-contain input[type="checkbox"]:disabled ~ .b-input::after {
  border-color: #ffffff;
}

.b-contain input:checked ~ .b-input::after {
  display: block;
}

.b-contain:hover input[type="checkbox"]:not([disabled]) ~ .b-input,
.b-contain input[type="checkbox"]:focus ~ .b-input {
  background: #e2e8f0;
  border-color: #64748b;
}

.b-contain:hover input[type="radio"]:not([disabled]) ~ .b-input,
.b-contain input[type="radio"]:focus ~ .b-input {
  background: #e2e8f0;
  border-color: #64748b;
}

.b-contain input:focus ~ .b-input {
  box-shadow: 0 0 0 2px #60a5fa;
}

.b-contain input[type="checkbox"]:checked ~ .b-input {
  background: #3b82f6;
  border-color: #1d4ed8;
}

.b-contain input[type="radio"]:checked ~ .b-input {
  background: #3b82f6;
  border-color: #1d4ed8;
}

.b-contain input[type="checkbox"]:disabled ~ .b-input,
.b-contain input[type="radio"]:disabled ~ .b-input {
  opacity: 0.5;
  cursor: not-allowed;
}

.b-contain input[type="radio"]:disabled ~ .b-input::after {
  background: #ffffff;
}

.b-contain:hover input[type="checkbox"]:not([disabled]):checked ~ .b-input,
.b-contain input[type="checkbox"]:checked:focus ~ .b-input {
  background: #2563eb;
  border-color: #1e40af;
}

.b-contain:hover input[type="radio"]:not([disabled]):checked ~ .b-input,
.b-contain input[type="radio"]:checked:focus ~ .b-input {
  background: #2563eb;
  border-color: #1e40af;
}