HTML checkbox generator

CSS Checkbox Switch

.cbr1 .toggle input {
  width: 100%;
  height: 100%;
  margin: 0 0;
  padding: 0 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  cursor: pointer;
  opacity: 0;
}

.cbr1 .toggle label {
  display: block;
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  left: 1px;
  background-image: -webkit-linear-gradient(top, #fff 0%, #ddd 50%, #fff 50%, #eee 100%);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4), inset 0 -1px 1px #888, inset 0 -5px 1px #bbb, inset 0 -6px 0 white;
  border-radius: 3px;
  font: normal 11px Arial, Sans-Serif;
  color: #666;
  text-shadow: 0 1px 0 white;
  cursor: text;
}

.cbr1 .toggle label:before {
  content: attr(data-off);
  position: absolute;
  top: 6px;
  right: 0;
  left: 0;
  z-index: 4;
}

.cbr1 .toggle label:after {
  content: attr(data-on);
  position: absolute;
  right: 0;
  bottom: 11px;
  left: 0;
  color: #666;
  text-shadow: 0 -1px 0 #eee;
}

.cbr1 .toggle input:checked+label {
  background-image: -webkit-linear-gradient(top, #eee 0%, #ccc 50%, #fff 50%, #eee 100%);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.4), inset 0 1px 7px -1px #ccc, inset 0 5px 1px #fafafa, inset 0 6px 0 white;
}

.cbr1 .toggle input:checked:hover+label {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), inset 0 1px 7px -1px #ccc, inset 0 5px 1px #fafafa, inset 0 6px 0 white;
}

.cbr1 .toggle input:checked+label:before {
  z-index: 1;
  top: 11px;
}

.cbr1 .toggle input:checked+label:after {
  bottom: 9px;
  color: #aaa;
  text-shadow: none;
  z-index: 4;
}
</style>

.cbr1 .toggle label:before {
  content: attr(data-off);
  position: absolute;
  top: 6px;
  right: 0;
  left: 0;
  z-index: 4;
}

.cbr1 .toggle label:after {
  content: attr(data-on);
  position: absolute;
  right: 0;
  bottom: 11px;
  left: 0;
  color: #666;
  text-shadow: 0 -1px 0 #eee;
}

.cbr1 .toggle input:checked:hover+label {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), inset 0 1px 7px -1px #ccc, inset 0 5px 1px #fafafa, inset 0 6px 0 white;
}

.cbr1 .toggle input:checked+label:before {
  z-index: 1;
  top: 11px;
}

.cbr1 .toggle input:checked+label:after {
  bottom: 9px;
  color: #aaa;
  text-shadow: none;
  z-index: 4;
}
</style>

Preview

Copy Highlight

CSS Checkbox And Radio Button

Checkboxes

Checked by Default

I am Checkbox 2

Checkbox - Disabled

Checked by Default

Radio Buttons - Grouped

Checked by Default

I am Group Radio 2

RadioButton - Disabled

Checked by Default

<div class="containers cbr2">
  <h5>Checkboxes</h5>
  <input id="checkbox1" name="checkbox1" checked="checked" type="checkbox" value="I am Checkbox 1" tabindex="1">
  <label for="checkbox1">Checked by Default</label>
  <br>
  <br>
  <input id="checkbox2" name="checkbox2" type="checkbox" value="I am Checkbox 2" tabindex="2">
  <label for="checkbox2">I am Checkbox 2</label>
  <br>
  <br>
  <input id="checkbox3" name="checkbox3" type="checkbox" value="I am Checkbox 3" disabled="disabled" tabindex="3">
  <label for="checkbox3">Checkbox - Disabled</label>
  <br>
  <br>
  <input id="checkbox4" name="checkbox4" checked="checked" type="checkbox" disabled="disabled" value="I am Checkbox 4" tabindex="4">
  <label for="checkbox1">Checked by Default</label>
</div>
<div class="containers cbr2">
  <h5>Radio Buttons - Grouped</h5>
  <input id="radio1" name="groupradio" checked="checked" type="radio" value="Radio 1" tabindex="5">
  <label for="radio1">Checked by Default</label>
  <br>
  <br>
  <input id="radio2" name="groupradio" type="radio" value="Radio 2" tabindex="6">
  <label for="radio2">I am Group Radio 2</label>
  <br>
  <br>
  <input id="radio3" name="groupradio" type="radio" value="Radio 3" disabled="disabled" tabindex="7">
  <label for="radio3">RadioButton - Disabled</label>
  <br>
  <br>
  <input id="radio4" checked="checked" type="radio" value="Radio 4" disabled="disabled" tabindex="8">
  <label for="radio1">Checked by Default</label>
</div>

.cbr2 input[type='radio']:focus+label,
.cbr2 input[type="checkbox"]:focus+label {
  color: #C30;
}

.cbr2 input[type="checkbox"]+label,
.cbr2 input[type="radio"]+label {
  background: url('data:image/png;base64,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') left top no-repeat;
  position: relative;
  margin: 0;
  padding: 0 0 0 50px;
  cursor: pointer;
  line-height: 43px;
  min-height: 43px;
  display: inline-block;
  z-index: 0;
  font-size: 20px;
  font-weight: bold;
}

.cbr2 input[type="checkbox"]+label {
  background-position: 0 0;
}

.cbr2 input[type="radio"]+label {
  background-position: 0 -200px;
}

.cbr2 input[type='checkbox']:checked+label {
  background-position: 0 -100px;
}

.cbr2 input[type='radio']:checked+label {
  background-position: 0 -300px;
}

.cbr2 input[type='checkbox']:disabled+label {
  background-position: 0 -400px;
  color: #999;
}

.cbr2 input[type='radio']:disabled+label {
  background-position: 0 -600px;
  color: #999;
}

.cbr2 input[type='checkbox']:disabled:checked+label {
  background-position: 0 -500px;
  color: #999;
}

.cbr2 input[type='radio']:disabled:checked+label {
  background-position: 0 -700px;
  color: #999;
}
</style>