1
は、私は、しかし、私はIEでの問題、EDGEおよびFirefoxカスタムチェックボックスのブラウザのクロス互換
FireFoxの、エッジおよびIE
-
を持っています、すべてのブラウザ間で問題ないはずカスタム]チェックボックスをオンにし、持っています
- 問題はダニが、私はこのコードは、クロスブラウザの互換性だと思ったとして線量誰もが、なぜ知っている
と黒の四角のチェックボックスです。
.regular-checkbox {
display: inline-block;
/* Safari 3-4, iOS 1-3.2, Android 1.6- */
-webkit-border-radius: 18px;
/* Firefox 1-3.6 */
-moz-border-radius: 18px;
/* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
border-radius: 18px;
width: 38px;
height: 38px;
border: 1px solid #ccc;
background-color: white !important;
}
.regular-checkbox {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.regular-checkbox:checked:after {
content: '\2714';
position: absolute;
color: green;
font-size: 37px;
top: 0;
}<input type='checkbox' class='regular-checkbox' checked />
_ _「私はこのコードは、クロスブラウザの互換性だと思ったとして、」 - まあ、そうではありません。多くのブラウザでは、フォーム要素の書式設定がほとんど行われていません。また、丸みのある枠線を要求することもあまりにも多すぎる可能性があります。そのため、ほとんどのカスタムチェックボックスソリューションでは、フォーマットする代わりに元のチェックボックス要素のみが非表示になっています。そのため、フォーマットは他の要素に適用されます。 And :: before/:: after擬似要素は、実際の子要素が挿入されたかのようにレンダリングされるはずですが、 'input'は子要素を持つことができないため、このような要素で生成されたコンテンツを使用することは、 – CBroe
これは、私がブラウザの外観を「非表示」にしていることを私が理解していることを理解しています。 –
これは要素を隠さず、ブラウザが「デフォルト」チェックボックスのように見せないようにするだけです。しかし、それは私が言及した問題とはほとんど関係がありません。 – CBroe