Html 自定义复选框样式-选中/取消选中时标签跳转

我正在使用CSS3设置复选框的样式。一切正常，除了每当我选中或取消选中复选框时标签就会跳转。你能告诉我为什么吗

input[type=“checkbox”]{
显示：无；
}
输入[type=“checkbox”]+label:：before{
背景色：白色；
边框：1px实心#ccc；
内容：''；
显示：内联块；
高度：15px；
宽度：15px；
文本对齐：居中；
边距：0 5px-2px 0；
}
输入[type=“checkbox”]：选中+标签：：之前{
内容：'\2713'；
}

检查1

您可以将伪元素的

位置设置为绝对位置，并相应地放置它

这里有一个解决方案


div
{
左侧填充：20px；
}
输入[type=“checkbox”]{
显示：无；
}
输入[type=“checkbox”]+label:：before{
背景色：白色；
边框：1px实心#ccc；
内容：''；
显示：内联块；
高度：15px；
宽度：15px；
文本对齐：居中；
边距：0 5px-2px 0；
位置：绝对位置；
左：10px；
}
输入[type=“checkbox”]：选中+标签：：之前{
内容：'\2713'；
}

检查1
您可以在伪元素中添加一个
溢出隐藏
，以防止跳跃效果。我还稍微更新了css，以补偿溢出和箭头在框中没有正确居中的事实


以下是我对它的看法：

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

input[type="checkbox"] + label::before{
  background-color: white;
  border: 1px solid #ccc;
  content: '';
  display: inline-block;
  height: 22px; /*Change width and height to compensate*/
  width: 22px; 
  text-align: center;
  margin: 0 5px -2px 0;
  /*Added styles*/
  overflow: hidden;
  top: 3px;
  position: relative;
}

input[type="checkbox"]:checked + label::before{
  content: '\2713';
}

更新

据OP报道，演示中仍然存在跳跃行为。我又添加了两个属性，这可能会解决这个问题。我得到了同样的期望结果，所以我不能自己测试它（很难修复你看不到的东西）

附加CSS

  margin: 0 5px -5px 0;
  line-height: 100%;
  position: relative; // This should keep the input positioned in one spot. 
  float: left; // This should keep any extra movements of label and/or input from jumping as well.

添加这两个属性的意义在于，这两个属性都将元素从文档的正常流中移除，因此与其他元素之间几乎没有交互，而这些元素通常可能会推动或移动输入和/或标签



寻找那个时髦的边缘偏移量，它总是被加上，以抵消跳跃行为

平衡了负和正的值

并添加了
行高：100%

margin:0 5px-5px 0；
线高：100%


还将
div
替换为
fieldset
这不是必需的，只是看起来更好而已。：）


input[type=“checkbox”]{
显示：无；
}
输入[type=“checkbox”]+label:：before{
背景色：白色；
边框：1px实心#ccc；
内容：''；
显示：内联块；
高度：15px；
宽度：15px；
文本对齐：居中；
边距：0 5px-5px 0；
线高：100%；
位置：相对位置；
浮动：左；
}
输入[type=“checkbox”]：选中+标签：：之前{
内容：'\2713'；
}

检查1
如果您选择正确，复选框将立即跳转您使用的是什么，我使用的是Firefox和Chrome WindowsPC@takeradi好的，看一看，现在看看。最初我得到了一个很好的结果，但这并不意味着其他人也会得到，所以我又添加了两个属性，这可能会起到作用；-）