Erhöhen Sie die Größe des Kontrollkästchens in IE 11

Question

Ich habe ein erbärmliches Problem mit Internet Explorer 11, da es die Checkbox nicht richtig skaliert im Gegensatz Firefox, die es richtig macht. Hier ist meine CSS-Code:

input[type="checkbox"] { 
    -ms-filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand'); 
    -moz-transform: scale(1.5); /* FF */ 
    transform: scale(1.5); 
    padding: 5px; 
} 

ich die -ms-filter mit dieser ersetzt, aber es hat nicht funktioniert:

filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', 
     M11=1.5320888862379554, M12=-1.2855752193730787, 
     M21=1.2855752193730796, M22=1.5320888862379558); 

und dann mit diesem, aber es immer noch nicht funktioniert:

-ms-transform: scale(1.5); 

Leider war keiner meiner Versuche erfolgreich und nirgends in SO sagt es, wie man es repariert. Normalerweise scale() soll auf IE arbeiten 9, aber es scheint, wie sie es in IE deaktiviert 11. Wie gesagt, es funktioniert gut in Firefox, aber nicht in IE 11.

Answer 1

Here Ich las:

[ 5] Internet Explorer 11.0 unterstützt das -webkit prefixed variant as an alias for the default one.

Wenn das nicht hilft, könnte dies ein Problem sein, das für Checkboxen spezifisch ist. Allerdings gibt es eine bessere Möglichkeit, Kontrollkästchen, um Stil mit HTML und CSS:

input[type=checkbox] { 
 
    display: none; 
 
} 
 

 
input[type=checkbox] + .cb { 
 
    display: inline-block; 
 
    width: 22px; 
 
    height: 22px; 
 
    margin: -4px 0; 
 
    border: 1px solid gray; 
 
    border-radius: 3px; 
 
    transition: .2s; 
 
    box-sizing: border-box; 
 
    box-shadow: inset 0 0 0 1px white; 
 
} 
 
input[type=checkbox] + .cb:before { 
 
    content: "✓"; 
 
    color: white; 
 
    position: absolute; 
 
    line-height: 20px; 
 
    font-size: 16px; 
 
    margin: 0 0 0 5px; 
 
} 
 

 
input[type=checkbox] + .cb:hover { 
 
    box-shadow: inset 0 0 0 1px #0055ff; 
 
    border-color: #0055ff; 
 
} 
 

 
input[type=checkbox]:checked + .cb { 
 
    box-shadow: inset 0 0 0 10px #0055ff; 
 
    border-color: #0055ff; 
 
} 
 

 
input[type=checkbox]:checked + .cb:hover { 
 
    box-shadow: inset 0 0 0 10px #3377ff; 
 
}

<label> 
 
    <input type="checkbox" checked> 
 
    <div class="cb"></div> 
 
    Style checkbox with CSS 
 
</label>