JSFiddle - React, Tailwind, and code Playground

by Dmitry Khmil

HTML

<div class="one-checkbox">
  <label>
    <input type="checkbox">
    <i></i>
    <span> Это самый просто пример стилизированый чекбоксов без javascript. Только чистый css3 </span>
  </label>
</div>

CSS

.one-checkbox {
  float: left;
  width: 100%;
}

.one-checkbox label {
  overflow: hidden;
  display: block;
  cursor: pointer;
  position: relative;
  font-size: 14px;
  padding: 2px 0 2px 25px;;
}

.one-checkbox label input {
  position: absolute;
  left: -999px;
}

.one-checkbox label i {
  border: 1px solid #ccc;
  width: 16px;
  height: 16px;
  position: absolute;
  left: 0;
  top: 0px;
}

.one-checkbox label input:checked + i:before {
  content: '';
	width: 8px;
	height: 5px;
	position: absolute;
	top: 50%;
	margin-top: -5px;
	left: 50%;
	margin-left: -4px;
	border: none;
	border-left: 1px solid #000;
	border-bottom: 1px solid #000;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.one-checkbox label span {}