Checkbox, radio

by Valeriy Brunov

HTML

<div class="page">

  <div class="input checkbox form-list__str form-list__str_align_center text text_size_small">
    <label for="approval">
      <input type="checkbox" name="approval" value="0" id="approval">
      <span>даю согласие на обработку своих персональных данных</span>
    </label>
  </div>

</div>

CSS

.page {
  /* Цвета */
  --primary-0: #00b200;
  /* Основной Цвет */
  --primary-1: #277727;
  --primary-2: #006000;
  --primary-3: #4ce54c;
  --primary-4: #88e588;

  --secondary-a-0: #132898;
  /* Вторичный Цвет A */
  --secondary-a-1: #2a3466;
  --secondary-a-2: #041052;
  --secondary-a-3: #5b70dc;
  --secondary-a-4: #8e9adc;

  --secondary-b-0: #ded300;
  /* Вторичный Цвет B */
  --secondary-b-1: #959031;
  --secondary-b-2: #787200;
  --secondary-b-3: #f4ec51;
  --secondary-b-4: #f4ef91;

  --complement-0: #df0000;
  /* Дополнительный Цвет */
  --complement-1: #953131;
  --complement-2: #780000;
  --complement-3: #f45151;
  --complement-4: #f49191;

  --shade-of-gray-0: #E6E6FA;
 
  --shade-of-gray-1: #E5E5E5;
  --shade-of-gray-2: #BFBFBF;
  --shade-of-gray-3: #7F7F7F;
}

input[type="text"],
input[type="password"] {
  padding: 0.7em 1em;
  border: 1px solid var(--shade-of-gray-0);
  border-radius: 5px;
  outline: none;
}

input[type="password"]:focus,
input[type="text"]:focus {
  padding: 0.7em 1em;
  border: 1px solid var(--shade-of-gray-2);
  border-radius: 5px;
  outline: none;
}

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

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

.checkbox > label > span::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  flex-grow: 0;
  border: 1px solid var(--shade-of-gray-0);
  border-radius: 0.25em;
  margin-right: 0.6em;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 50% 50%;
}

.checkbox > label > input:checked + span::before {
  border-color: var(--primary-1);
  background-color: var(--primary-1);
  color: white;
  font-family: 'Lovesafe';
  display: inline-block;
  text-rendering: auto;
  position: relative;
  content: "1";
}

.style-radio {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

.style-radio + label {
  display:...