Chrome에서 HTML 체크 박스 또는 라디오 버튼이 줄어들지 않도록하려면 어떻게해야하나요?

Question

참조 스크린 샷 :

크롬에서 숙청되는 체크 박스의 일부를 방지하는 간단한 방법이 있나요? (그것들은 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; 
    }`