自定义复选框样式

我正在使用CSS3设置一个复选框。 一切正常，只要每当我选中并取消选中复选框时标签就会跳转。 你能告诉我为什么吗？

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

input[type="checkbox"] + label::before{
  background-color: white;
  border: 1px solid #ccc;
  content: '';
  display: inline-block;
  height: 15px;
  width: 15px;
  text-align: center;
  margin: 0 5px -2px 0;
}

input[type="checkbox"]:checked + label::before{
  content: '\2713';
} 
  
<div>
  <input type="checkbox" id="checkbox1">
  <label for="checkbox1">Check 1</label>
</div> 
  
 
I am styling a checkbox using CSS3. Everything works fine except that the label jumps whenever I check and uncheck the checkbox. Could you please tell me why?
 
 
 
  
  
input[type="checkbox"]{
  display:none;
}

input[type="checkbox"] + label::before{
  background-color: white;
  border: 1px solid #ccc;
  content: '';
  display: inline-block;
  height: 15px;
  width: 15px;
  text-align: center;
  margin: 0 5px -2px 0;
}

input[type="checkbox"]:checked + label::before{
  content: '\2713';
} 
  
<div>
  <input type="checkbox" id="checkbox1">
  <label for="checkbox1">Check 1</label>
</div> 
  
 

                
最满意答案
                
                    
                        
 您可以在伪元素中添加overflow hidden的overflow hidden以防止跳跃效果。 我还稍微更新了css以补偿溢出以及箭头没有在盒子中正确居中的事实。 
 
 JSFIDDLE示例 
 
 这是我的看法： 
 
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';
}
You could add an overflow hidden to your pseudo element to prevent the jumping effect. I also updated the css a little bit to compensate for the overflow and the fact that the arrow wasn't really centered properly in the box.
 
JSFIDDLE Example
 
Here is my take on it:
 
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';
}