checkboxをブラウザのネイティブアピアランスを変更してデザインしたい場合、CSSであらかじめ元のアピアランスを消しておきます。そのとき、selectなどのアピアランスを消すときに利用する次のCSSでは、うまく消えてくれません。サンプルは、Internet Explorer11、Firefoxなどで見ると、（１）と（２）の違いが出ます。それ以外では、同じものに見えます。

なお、このサンプルは、「CSS3　UI要素状態擬似クラス　:disabled、:checkedの確認」のものを流用しています。

サンプル（１）は、元のアピアランスを消して、CSSでオリジナルのcheckboxを追加していますが、Internet Explorer11やFirefoxでは、元のアピアランスが残ってしまいます。EdgeやChromeなどでは問題ありません。

サンプル（１）

サンプル（１）の元のアピアランスを消すCSSソース

.wrap input[type=checkbox] {
	-webkit-appearance: none; //ChromeやSafari用
	-moz-appearance: none; //Firefox用
	appearance: none;
	}

 

サンプル（２）では、Internet Explorer11、Firefoxの両方に対応させるため、「position: absolute」を使って、元のアピアランスをビューポートの外側に押し出して消しています（あまり好きな方法ではないのですが）。これで、Internet Explorer11とFirefoxを含むすべてのブラウザの画面上で元のアピアランスが消え、オリジナルのcheckboxのみになります。

サンプル（２）

サンプル（２）の元のアピアランスを消すCSSソース

.wrap2 input[type=checkbox] {
	position: absolute;
	left: -1000em;
	}