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

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

就像 konrad 所说的那样，通过给它一个宽度和高度，它总是有它的形状，而不是使用 min-height 和 min-width 只是有高度和宽度，然后你也可以将勾号移动到复选框的中心使用 margin

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实际展示