如何防止Chrome中的HTML复选框或单选按钮缩小？

Question

见截图：

有一个简单的办法来防止一些复选框在Chrome中被压扁？ （它们在Firefox中的大小相同）。

下面是一个复选框/标签对的示例HTML片段：

<span class="form-col"> 
    <input type="checkbox" value="-Min accompanied adults" id="product-type-checkbox9"> 
    <label for="product-type-checkbox9">-Min accompanied adults</label> 
</span> 

Answer 1

<span> 
    <br>input type="checkbox" style="min-width:13px!important" value="-Min accompanied adults" id="product-type-checkbox9" 
<br> 
    label for="product-type-checkbox9"-Min accompanied adults/label 
<br> 
</span> 

只需设置的复选框将做要紧的最小宽度。 这里我写了内联样式（仅举例），应该不惜一切代价避免。

Answer 2

<div class="squaredTwo"> 
    <input type="checkbox" value="None" id="squaredTwo" name="check" /> 
    <label for="squaredTwo"></label> 
    </div>` 


    ` /* SQUARED TWO */ 
    .squaredTwo { 
    width: 28px; 
    height: 28px; 
    background: #fcfff4; 

    background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); 
    background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); 
    background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); 
    background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); 
    background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0); 
    margin: 20px auto; 

    -webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5); 
    -moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5); 
    box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5); 
    position: relative; 
    } 

    .squaredTwo label { 
    cursor: pointer; 
    position: absolute; 
    width: 20px; 
    height: 20px; 
    left: 4px; 
    top: 4px; 

    -webkit- box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1); 
    -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1); 
    box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1); 

    background: -webkit-linear-gradient(top, #222 0%, #45484d 100%); 
    background: -moz-linear-gradient(top, #222 0%, #45484d 100%); 
    background: -o-linear-gradient(top, #222 0%, #45484d 100%); 
    background: -ms-linear-gradient(top, #222 0%, #45484d 100%); 
    background: linear-gradient(top, #222 0%, #45484d 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#222', endColorstr='#45484d',GradientType=0); 
    } 

    .squaredTwo label:after { 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
    filter: alpha(opacity=0); 
    opacity: 0; 
    content: ''; 
    position: absolute; 
    width: 9px; 
    height: 5px; 
    background: transparent; 
    top: 4px; 
    left: 4px; 
    border: 3px solid #fcfff4; 
    border-top: none; 
    border-right: none; 

    -webkit-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
    -o-transform: rotate(-45deg); 
    -ms-transform: rotate(-45deg); 
    transform: rotate(-45deg); 
    } 

    .squaredTwo label:hover::after { 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; 
    filter: alpha(opacity=30); 
    opacity: 0.3; 
    } 

    .squaredTwo input[type=checkbox]:checked + label:after { 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
    filter: alpha(opacity=100); 
    opacity: 1; 
    }`