html - 如何使用纯CSS设计非填充圆 Angular 复选框

Question

我正在为 woocommerce 制作一个带样式的圆形复选框。问题是我的复选框现在被填入了里面。不加馅怎么把里面变薄？

input#createaccount:checked {
	background-color: #253849;
}

input#createaccount{
	position: relative;
    margin-left: 4px;
    width: 25px;
    float: left;
    margin: 2px 10px 2px 1px;
    height: 25px;
    border-radius: 50%;
    vertical-align: middle;
    border: 4px solid #295282;
    -webkit-appearance: none;
    outline: none;
    cursor: pointer;
}

<input class="input-checkbox" id="createaccount" type="checkbox" name="createaccount" value="1">

Answer 1

在没有 javascript 的情况下执行此操作的一种方法是创建一个带有输入的包装器元素和另一个元素作为复选框状态的指示器。这样您就可以使用选择器 input:checked + nextElement 并根据复选框状态更改第二个元素的样式。

然后您只需使用opacity: 0 隐藏复选框。通过这种方法，您还可以在内部元素上使用过渡和转换。

.checkbox-el {
  position: relative;
  margin-left: 4px;
  width: 25px;
  float: left;
  margin: 2px 10px 2px 1px;
  height: 25px;
  border-radius: 50%;
  vertical-align: middle;
  border: 2px solid #295282;
  -webkit-appearance: none;
  outline: none;
  cursor: pointer;
  padding: 5px;
}

.checkbox-el input {
  width: 100%;
  height: 100%;
  position: absolute;
  top: -3px;
  left: -3px;
  z-index: 5;
  opacity: 0;
  cursor: pointer;
}

.checkbox-circle {
  position: relative;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  z-index: 1;
  transform: scale(0.5);
  transition: all 0.25s ease-in;
}

.checkbox-el input:checked + .checkbox-circle {
  background-color: #253849;
  transform: scale(1)
}

<span class="checkbox-el">
  <input class="input-checkbox" id="createaccount" type="checkbox" name="createaccount" value="1">
  <div class="checkbox-circle"></div>
</span>