Question

我有自定义复选框，当我在选中和未选中状态之间点击时，内容会跳跃。我怎么能阻止这种情况发生？这是我的代码：

CSS：

input[type=checkbox] {
display: none;
}

label:before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
margin-right: 18px;
background-color: rgba(225, 225, 225);
border-radius:4px;
border:1px solid #cecece;
}

input[type=checkbox]:checked + label:before {
content: "\2713";
font-size: 15px;
color: red;
text-align: center;
line-height: 15px;
}

HTML：

<input id="checkbox1" type="checkbox" class="checkbox" name="lists[Fortune Daily]" />
<label for="checkbox1"><img class="list" src="http://email-media.s3.amazonaws.com/fortune/fortunef_55x50.png" /> <span>Fortune Daily</span>
</label>

提前谢谢！

Answer 1

纠正跳跃没有问题。请参阅以下代码：

input[type=checkbox] {
display: none;
}

label {
  font-size: 15px;
  vertical-align: top;
}

label:before {
content: "\2713";
display: inline-block;
width: 16px;
height: 16px;
margin-right: 18px;
background-color: rgba(225, 225, 225);
border-radius:4px;
border:1px solid #cecece;
font-size: 15px;
color: white;
text-align: center;
line-height: 15px;
}

input[type=checkbox]:checked + label:before {
color: red;
}

<input id="checkbox1" type="checkbox" class="checkbox" name="lists[Fortune Daily]" />
<label for="checkbox1"><img class="list" src="http://email-media.s3.amazonaws.com/fortune/fortunef_55x50.png" /> <span>Fortune Daily</span>
</label>

但是，我不建议您继续使用此解决方案，因为这里似乎无法对元素进行正确的垂直对齐。例如，代替带有'before'的标签，您可以通过具有display:table属性的外部div和带有display:table-cell的三个内部元素来实现它。至少你可以完全控制元素的位置，而不依赖于字体大小。

如何避免在已检查和未检查状态之间跳转

1 个答案: