Пользовательские флажки, без JavaScript, без изменения HTML, только CSS

Question

Здравствуйте, Stackoverflow Team,

Я хочу вставить пользовательские галочки и не могу использовать Javascript.Кажется, я не могу сделать так, чтобы моя пользовательская галочка показывалась.

Я не уверен, как связать два элемента div в группе формы класса вместе.Или, если это вообще возможно.К сожалению, я не могу изменить любой HTML или использовать Javascript.

/* Show the checkmark when checked */

.form-group input:checked~.form-group .checkmark:after {
display: block;
}

Эта часть является основной, у меня возникли проблемы.

Нет Javascript, нет изменений HTML, возможен только CSS.

Я думаю, что код говорит сам за себя.

/* The container */

.checkbox {
  cursor: pointer;
  font-size: 14px;
  top: 32px;
  left: 5px;
  opacity: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.help-block {
  margin-left: 30px;
}


/* Hide the browser's default checkbox */

.checkbox input {
  position: absolute;
  top: 25px;
  opacity: 0;
  cursor: pointer;
}


/* Create a custom checkbox */

.checkmark {
  position: absolute;
  top: 37px;
  left: 20px;
  height: 20px;
  width: 20px;
  background-color: #eee;
  border-radius: 4px;
}


/* On mouse-over, add a grey background color */

.form-group:hover input~.form-group .checkmark {
  background-color: #ccc;
}


/* When the checkbox is checked, add a background */

.form-group input:checked~.form-group .checkmark {
  background-color: #DF606C;
}

.noble .form-group input:checked~.form-group .checkmark {
  background-color: #005144;
}

.sporty .form-group input:checked~.form-group .checkmark {
  background-color: #E5AC4C;
}

.candy .form-group input:checked~.form-group .checkmark {
  background-color: #7CC5B6;
}

.lake .form-group input:checked~.form-group .checkmark {
  background-color: #498BA6;
}

.natural .form-group input:checked~.form-group .checkmark {
  background-color: #987247;
}

.bluesky .form-group input:checked~.form-group .checkmark {
  background-color: #00ADCC;
}


/* Create the checkmark/indicator (hidden when not checked) */

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}


/* Show the checkmark when checked */

.form-group input:checked~.form-group .checkmark:after {
  display: block;
}


/* Style the checkmark/indicator */

.checkmark:after {
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

<div class="row planyo-form-row-wrapper">
  <div class="form-group planyo-form-item-group  col-sm-12" id="row_rental_prop_AGB_UG">
    <div class="checkbox "><label for="rental_prop_AGB_UG" class="with-status-border chk_label"><input type="checkbox" id="rental_prop_AGB_UG" name="rental_prop_AGB_UG" onclick="js_dates_changed();" onchange="js_dates_changed();"> AGB UG<em>*</em></label></div>
    <div class="help-block">Ja, ich stimme den <a href="index.php?option=com_content&amp;view=article&amp;id=3&amp;catid=8">Datenschutzbestimmungen</a> vom Parkour Creation e.V zu. <span class="checkmark"></span></div>
  </div>
</div>