Пользовательский флажок в пользовательском флажке не отображается

Question

У меня есть пользовательский флажок, который я хочу добавить в него, когда отмечен галочкой

Вот фрагмент кода:

input[type="checkbox"] {
  transform: scale(3, 3) !important;
  margin: 0px 21px;
}

.checkbox-custom,
.checkbox-custom-label {
  display: inline-block;
  vertical-align: middle;
  margin: 5px 7px;
  cursor: pointer;
  font-size: 2.4rem;
  font-family: "FuturaPT_BOOK";
  /* padding: 6px; */
}

[type="checkbox"]:not(:checked)+label:after,
[type="checkbox"]:checked+label:after {
  content: '✔';
  position: absolute;
  top: 8px;
  left: 10px;
  font-size: 24px;
  line-height: 0.8;
  color: #fff;
  transition: all .2s;
}

.checkbox-custom+.checkbox-custom-label:before {
  content: '';
  background: #fff;
  border: 1px solid #000;
  display: inline-block;
  vertical-align: middle;
  width: 30px;
  height: 30px;
  padding: 2px;
  margin-right: 30px;
  text-align: center;
  border-radius: 24%;
}

.checkbox-custom:checked+.checkbox-custom-label:before {
  background: #0000;
  box-shadow: inset 0px 0px 0px 4px #fff;
}

<p class="checkbox">
  <input type="checkbox" class="checkbox  checkbox-custom" name="cgv" id="cgv" value="1" {if $checkedTOS}checked="checked" {/if} />
  <label class="checkbox-custom-label" for="cgv">{l s='I agree to the terms of service' mod='threepagecheckout'}</label>
  <a href="{$link_conditions|escape:'html':'UTF-8'}" class="iframe" rel="nofollow">{l s='(Read the Terms of Service)' mod='threepagecheckout'}</a>
</p>

к сожалению, когда я нажимаю на флажок, ничего не отображается, я пробовал другую комбинацию, но ничего не работало,

что я делаю не так?

Answer 1

Сначала вы должны скрыть флажок по умолчанию:

[type="checkbox"] {
  display: none
}

Затем установите общий стиль для label:after:

[type="checkbox"]+label:after {
  content: '';
  position: absolute;
  ...
}

Затем введите :checked состояние

[type="checkbox"]:checked+label:after {
   content: '✔';
}

А также установите метку так, чтобы она правильно отображалась в середине вашего пользовательского флажка.Ваша отметка была за пределами коробки.

input[type="checkbox"] {
  transform: scale(3, 3) !important;
  margin: 0px 21px;
}

.checkbox-custom,
.checkbox-custom-label {
  display: inline-block;
  vertical-align: middle;
  margin: 5px 7px;
  cursor: pointer;
  font-size: 2.4rem;
  font-family: "FuturaPT_BOOK";
  /* padding: 6px; */
}

[type="checkbox"] {
  display: none
}

[type="checkbox"]+label:after {
  content: '';
  position: absolute;
  top: 31px;
  left: 23px;
  font-size: 24px;
  line-height: 0.8;
  color: #fff;
  transition: all .2s;
}

[type="checkbox"]:checked+label:after {
  content: '✔';
}

.checkbox-custom+.checkbox-custom-label:before {
  content: '';
  background: #fff;
  border: 1px solid #000;
  display: inline-block;
  vertical-align: text-top;
  width: 30px;
  height: 30px;
  padding: 2px;
  margin-right: 30px;
  text-align: center;
  border-radius: 24%;
}

.checkbox-custom:checked+.checkbox-custom-label:before {
  background: #000;
  box-shadow: inset 0px 0px 0px 4px #fff;
}

<p class="checkbox">
  <input type="checkbox" class="checkbox  checkbox-custom" name="cgv" id="cgv" value="1" />
  <label class="checkbox-custom-label" for="cgv">I agree to the terms of service</label>
  <a href="{$link_conditions|escape:'html':'UTF-8'}" class="iframe" rel="nofollow">Read the Terms of Service</a>
</p>

Answer 2

я изменил свой код

/* Base for label styling */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
  position: absolute;
  left: -9999px;
}
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
  position: relative;
  padding-left: 1.95em;
  cursor: pointer;
}

/* checkbox aspect */
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 1.25em; height: 1.25em;
  border: 2px solid #ccc;
  background: #fff;
  border-radius: 4px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.1);
}
/* checked mark aspect */
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
  content: '\2713\0020';
  position: absolute;
  top: .15em; left: .22em;
  font-size: 1.3em;
  line-height: 0.8;
  color: #09ad7e;
  transition: all .2s;
  font-family: 'Lucida Sans Unicode', 'Arial Unicode MS', Arial;
}
/* checked mark aspect changes */
[type="checkbox"]:not(:checked) + label:after {
  opacity: 0;
  transform: scale(0);
}
[type="checkbox"]:checked + label:after {
  opacity: 1;
  transform: scale(1);
}
   

<p class="checkbox">
  <input type="checkbox"  class="checkbox  checkbox-custom" name="cgv" id="cgv" value="1" {if $checkedTOS}checked="checked" {/if} />
  <label class="checkbox-custom-label" for="cgv">{l s='I agree to the terms of service' mod='threepagecheckout'}</label>
  <a href="{$link_conditions|escape:'html':'UTF-8'}" class="iframe" rel="nofollow">{l s='(Read the Terms of Service)' mod='threepagecheckout'}</a>
</p>