使自定義複選框不改變它的大小。

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 
{ 
    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顯示在行動

它

Answer 2

嘗試這樣的事情

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