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>

自定义checkobx中的自定义刻度线未显示

2 个答案: