Checkbox

by Valeriy Brunov

HTML

<div class="rrr">


<label class="checkbox checkbox_theme_point" for="sss">
  <input type="checkbox" name="sss" value="1" id="sss">
  <span>
    <div></div>
    SSScccccc
  </span>
</label>

</div>

CSS

/* span {border: 1px solid red;}
label {border: 1px solid blue:} */
/* .rrr {border: 1px solid green;} */

input[type="checkbox"] {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

.checkbox>span {
  display: flex;
  align-items: center;
  user-select: none;
}

.checkbox div {
  position: relative;
  outline: 1px solid green;
  border-radius: 3px;
  --checkbox-wh: 14px;
  min-width: var(--checkbox-wh);
  height: var(--checkbox-wh);
  margin-right: 0.4em;
  background-color: white;
  
  display: flex;
  justify-content: center;
  align-items: center;
}

.checkbox>input:checked+span div {
  background-color: green;
}

.checkbox>input:checked+span div::before {
  content: "";
  position: absolute;
  top: 0;
  left: 25%;
  box-sizing: border-box;
  padding: 1px;
  border-right: 3px solid white;
  border-bottom: 3px solid white;
  transform: rotate(45deg);
  width: 8px;
  height: 11px;
}

.checkbox_theme_point div::before {
  content: "";
  position: absolute;
  box-sizing: border-box;
  border: 1px solid white;
  width: 8px;
}
.checkbox_theme_point div {
  background-color: green;
}