Question

我正在尝试制作自定义复选框，就像它在这里说的那样这就是我所做的： http://jsfiddle.net/216nt56y/ 我的css：

input[type=checkbox].css-checkbox {
    visibility: hidden;
}
label.css-label
{
    border-color: white;
    border: white 1px solid;
    border-radius: 3px;
}
input[type=checkbox].css-checkbox:checked + label:before {  
    content: "\2714";  
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);  
    font-size: 15px;  
    color: #f3f3f3;  
    text-align: center;  
    line-height: 15px;  
}

这不是我想要的，因为我想要一个检查方块在取消选中时具有相同的大小。我怎么能得到它？

Answer 1

尝试这样的事情

label.css-label {
  display: inline-block;
  min-height: 20px;
  min-width: 20px; 
}

Answer 2

就像konrad说的那样，给它一个宽度和高度它总是有它的形状，而不是使用最小高度和最小宽度只有高度和宽度然后你也可以将检查标记移动到复选框的中心使用保证金

label.css-label
{
    border-color: white;
    border: white 1px solid;
    border-radius: 3px;
    display: inline-block;
    height: 18px;
    width: 18px; 
}
input[type=checkbox].css-checkbox:checked + label:before {  
    content: "\2714";  
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);  
    font-size: 15px;  
    color: #f3f3f3;  
    text-align: center;  
    line-height: 15px;
    margin-left:2px;
}

这里有JSFIDDLE显示它的实际效果

使自定义复选框不改变它的大小。

2 个答案: