iOSデバイスにチェックボックスとラジオボタンを表示する方法を修正しますか？

Question

これらはPC、Mac OS、Androidではうまく動作しますが、iOS端末では正しく表示されているかどうかはわかりません。下の画像を参照してください。 ライブの例 - http://demos.creative-tim.com/material-dashboard/documentation/tutorial-components.html#checkbox-row。

チェックボックスに関連するCSSは：

.checkbox input[type=checkbox] { 
    opacity: 0; 
    position: absolute; 
    margin: 0; 
    z-index: -1; 
    width: 0; 
    height: 0; 
    overflow: hidden; 
    left: 0; 
    pointer-events: none; 
} 
.checkbox .checkbox-material { 
    vertical-align: middle; 
    position: relative; 
    top: 3px; 
    padding-right: 5px; 
} 
.checkbox .checkbox-material:before { 
    display: block; 
    position: absolute; 
    left: 0; 
    content: ""; 
    background-color: rgba(0, 0, 0, 0.84); 
    height: 20px; 
    width: 20px; 
    border-radius: 100%; 
    z-index: 1; 
    opacity: 0; 
    margin: 0; 
    transform: scale3d(2.3, 2.3, 1); 
} 
.checkbox .checkbox-material .check { 
    position: relative; 
    display: inline-block; 
    width: 20px; 
    height: 20px; 
    border: 1px solid rgba(0,0,0, .54); 
    overflow: hidden; 
    z-index: 1; 
    border-radius: 3px; 
} 
.checkbox .checkbox-material .check:before { 
    position: absolute; 
    content: ""; 
    transform: rotate(45deg); 
    display: block; 
    margin-top: -3px; 
    margin-left: 7px; 
    width: 0; 
    height: 0; 
    background: red; 
    box-shadow: 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0 inset; 
    animation: checkbox-off 0.3s forwards; 
} 
.checkbox input[type=checkbox]:focus + .checkbox-material .check:after { 
    opacity: 0.2; 
} 
.checkbox input[type=checkbox]:checked + .checkbox-material .check { 
    background: #9c27b0; 
} 
.checkbox input[type=checkbox]:checked + .checkbox-material .check:before { 
    color: #FFFFFF; 
    box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px; 
    animation: checkbox-on 0.3s forwards; 
} 
.checkbox input[type=checkbox]:checked + .checkbox-material:before { 
    animation: rippleOn 500ms; 
} 
.checkbox input[type=checkbox]:checked + .checkbox-material .check:after { 
    animation: rippleOn 500ms forwards; 
} 
.checkbox input[type=checkbox]:not(:checked) + .checkbox-material:before { 
    animation: rippleOff 500ms; 
} 
.checkbox input[type=checkbox]:not(:checked) + .checkbox-material .check:after { 
    animation: rippleOff 500ms; 
} 
fieldset[disabled] .checkbox, fieldset[disabled] .checkbox input[type=checkbox], 
.checkbox input[type=checkbox][disabled] ~ .checkbox-material .check, 
.checkbox input[type=checkbox][disabled] + .circle { 
    opacity: 0.5; 
} 
.checkbox input[type=checkbox][disabled] ~ .checkbox-material .check { 
    border-color: #000000; 
    opacity: .26; 
} 
.checkbox input[type=checkbox][disabled] + .checkbox-material .check:after { 
    background-color: rgba(0,0,0, 0.87); 
    transform: rotate(-45deg); 
} 

@keyframes checkbox-on { 
    0% { 
    box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px; 
    } 
    50% { 
    box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px 2px 0 11px; 
    } 
    100% { 
    box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px; 
    } 
} 
@keyframes rippleOn { 
    0% { 
    opacity: 0; 
    } 
    50% { 
    opacity: 0.2; 
    } 
    100% { 
    opacity: 0; 
    } 
} 
@keyframes rippleOff { 
    0% { 
    opacity: 0; 
    } 
    50% { 
    opacity: 0.2; 
    } 
    100% { 
    opacity: 0; 
    } 
} 

Answer 1

あなたはCSSでappearanceを使用する必要があります：あなたの答えのための

.checkbox input[type=checkbox] { 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance:   none; 
}