如何避免在已选中状态和未选中状态之间跳转

我有自定义复选框，并且在单击已选状态和未选中状态时内容正在跳转。我怎样才能阻止这种情况发生？这里是我的代码：如何避免在已选中状态和未选中状态之间跳转

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>

预先感谢您！

来源

2015-02-06 amyyyyy

通过CSS/HTML复选框非常尴尬。我建议使用jQuery解决方案，如http://www.no-margin-for-errors.com/projects/prettycheckboxes/ – SRing 2015-02-06 20:57:34

谢谢SRing！不幸的是，我需要一个CSS/HTML解决方案，因为这个表单将生活在这个系统不能很好地与JS ... – amyyyyy 2015-02-06 21:07:13

一般:)看看亚历山大的答案。他明白了。 – SRing 2015-02-06 21:10:42

纠正跳跃是没有问题的。请参见下面的代码：

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>

不过，我不建议您继续使用该解决方案，因为它似乎是不可能让这里的元素的正确的垂直对齐方式。例如，您可以使用display:table属性的外部div和display:table-cell的三个内部元素来实现，而不是使用'之前'的标签。至少你将完全控制元素的放置，而不依赖于字体大小。

来源

2015-02-06 21:06:01

如何避免在已选中状态和未选中状态之间跳转

回答

相关问题