IEでだけ、チェックボックスに-webkit-appearance: none;が効かずデフォルトのままになる

閲覧ありがとうございます。

チェックボックスをカスタマイズしましたが、
IEでだけ-webkit-appearance: none;が効かず、デフォルトの状態になっています。
※IEのバージョンは11です。

カスタマイズの方法としては、
inputのデフォルトのスタイルを-webkit-appearance: none;で消した後、
inputの背景として灰色のチェックボックスの画像を表示し、
チェックされたら、赤色のチェックボックスの画像に差し替えています。

お手数ですが、解決策を教えていただけましたら幸いです。
よろしくお願い致します。

▼CodePen（IEでは開きません）
https://codepen.io/0166/pen/xMymNX

HTML
1<input id="01" type="checkbox"><label for="01">あああ</label>
2<input id="02" type="checkbox"><label for="02">あああ</label>
3<input id="03" type="checkbox"><label for="03">あああ</label>

CSS
1input {
2  appearance: none;
3  -webkit-appearance: none;
4  background: url(https://placehold.jp/20x20.png);
5  padding-left: 20px;
6  height: 20px;
7  vertical-align: -7px;
8}
9input:checked {
10  background: url(https://placehold.jp/ff310f/ff310f/20x20.png);
11}
12label {
13   margin-right: 30px;
14}

▼IEでの見た目

かろうじてチェックボックスの上下に画像の色（灰・赤）が見えていますが、
デフォルトのチェックボックスは依然として残っています。

▼目指す見た目

以上になります。
よろしくお願い致します。

cerfweb

2019/02/15 21:48

IEはappearance (-moz-appearance, -webkit-appearance)に対応していません。 https://developer.mozilla.org/ja/docs/Web/CSS/appearance#Browser_compatibility

_sz

2019/02/16 02:11

なるほど...！まずは仕様を確認するべきでした。ご指摘ありがとうございます！

行動規範の内容に同意します

回答3件

ベストアンサー

inputのデフォルトのスタイルを-webkit-appearance: none;で消した後、

IE11ではappearanceは使えません。

Bootstrapでは、以下のような方法でチェックボックスを消しています（ソースコード）。このようなコードになった理由についてもコメントに書かれています。

scss
1.btn-group-toggle {
2  > .btn,
3  > .btn-group > .btn {
4    margin-bottom: 0; // Override default `<label>` value
5
6    input[type="radio"],
7    input[type="checkbox"] {
8      position: absolute;
9      clip: rect(0, 0, 0, 0);
10      pointer-events: none;
11    }
12  }
13}

投稿2019/02/16 00:21

maisumakun

総合スコア145184

_sz

2019/02/16 02:32

こちらの方法で、無事目指す見た目を作ることができました。 clipにつきましては、MDNに非推奨として「ゆくゆくはなくなるもの」と記載されていたのが若干不安ではありますが、今はまだなくなっていないようなので、どうしてもカスタマイズしなければならない場合はこちらの方法も手段の一つとして考えて行こうと思います。（後継と思われるclip-pathは、一部を除きIE非対応でした。）ご回答ありがとうございました！

行動規範の内容に同意します

解決済みですが、
以下のようにすれば全ブラウザ共通で実装ができるので回答しておきます。

html
1<input id="01" type="checkbox"><label for="01" class="checkbox"></label><label for="01">あああ</label>
2<input id="02" type="checkbox"><label for="02" class="checkbox"></label><label for="02">あああ</label>
3<input id="03" type="checkbox"><label for="03" class="checkbox"></label><label for="03">あああ</label>
4
5<label><input id="04" type="checkbox"><span class="checkbox"></span>あああ</label>
6<label><input id="05" type="checkbox"><span class="checkbox"></span>あああ</label>
7<label><input id="06" type="checkbox"><span class="checkbox"></span>あああ</label>
8

css
1[type="checkbox"] {
2	display: none;
3}
4.checkbox {
5	display: inline-block;
6	width: 1em;
7	height: 1em;
8	background: #ddd;
9}
10[type="checkbox"]:checked + .checkbox {
11	background: #ff310f;
12}