自定义复选框样式 - 选中/取消选中标签跳转(Custom Checkbox Styling - Label jumps on check/uncheck)
我正在使用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'; }
更多推荐
checkbox,px,type,label,input,电脑培训,计算机培训,IT培训"/> <meta name="
发布评论