Чекбоксы и радиокнопки (кастомный вариант)

<div class="checkbox">
  <input class="checkbox-input" type="checkbox" id="checkbox-1" value="checkbox-one">
  <label class="checkbox-label" for="checkbox-1">
    Вариант 1 (чекбокс)
  </label>
</div>

<div class="checkbox">
  <input class="checkbox-input" type="checkbox" id="checkbox-2" value="checkbox-two">
  <label class="checkbox-label" for="checkbox-2">
    Вариант 2 (чекбокс)
  </label>
</div>

<div class="checkbox">
  <input class="checkbox-input" type="checkbox" id="checkbox-3" value="checkbox-three">
  <label class="checkbox-label" for="checkbox-3">
    Вариант 3 (чекбокс)
  </label>
</div>

.checkbox {
  margin-bottom: 14px;
  width: fit-content;
  display: flex;
  justify-content: center;
  align-items: center;
}

.checkbox:last-child {
  margin-bottom: 0;
}

.checkbox-label {
  cursor: pointer;
  padding-left: 10px;
}

.checkbox-input {
  cursor: pointer;
  appearance: none;
  position: relative;
  width: 20px;
  height: 20px;
  background-color: #fff;
  border: 1px solid #dcdcdc;
  transition: 300ms;
}

.checkbox-input::after {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 -960 960 960' stroke='%23FFFFFF' stroke-width='30' fill='%23FFFFFF'%3E%3Cpath d='M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  transition: 300ms;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}

.checkbox-input:checked {
  background-color: #2e4a82;
  border-color: #2e4a82;
}

.checkbox-input:checked::after {
  opacity: 1;
}

<div class="radio">
  <input class="radio-input" type="radio" id="radio-1" name="radio" value="radio-one">
  <label class="radio-label" for="radio-1">
    Вариант 1 (радиокнопка) 
  </label>
</div>

<div class="radio">
  <input class="radio-input" type="radio" id="radio-2" name="radio" value="radio-two">
  <label class="radio-label" for="radio-2">
    Вариант 2 (радиокнопка)
  </label>
</div>

<div class="radio">
  <input class="radio-input" type="radio" id="radio-3" name="radio" value="radio-three">
  <label class="radio-label" for="radio-3">
    Вариант 3 (радиокнопка)
  </label>
</div>

.radio {
  margin-bottom: 14px;
  width: fit-content;
  display: flex;
  justify-content: center;
  align-items: center;
}

.radio:last-child {
  margin-bottom: 0;
}

.radio-label {
  cursor: pointer;
  padding-left: 10px;
}

.radio-input {
  cursor: pointer;
  appearance: none;
  position: relative;
  width: 20px;
  height: 20px;
  background-color: #fff;
  border: 1px solid #dcdcdc;
  transition: 300ms;
  border-radius: 50%;
}

.radio-input::after {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 -960 960 960' stroke='%23FFFFFF' stroke-width='30' fill='%23FFFFFF'%3E%3Cpath d='M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  transition: 300ms;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}

.radio-input:checked {
  background-color: #2e4a82;
  border-color: #2e4a82;
}

.radio-input:checked::after {
  opacity: 1;
}