teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問IEでだけ、チェックボックスに-webkit-appearance: none;が効かずデフォルトのままになる

編集履歴

質問編集履歴

5

編集

2019/02/16 15:54

投稿

_sz
_sz

スコア21

test CHANGED
File without changes
test CHANGED
@@ -99,63 +99,3 @@
99
99
  以上になります。
100
100
 
101
101
  よろしくお願い致します。
102
-
103
-
104
-
105
- ###
106
-
107
-
108
-
109
- 【解決】
110
-
111
-
112
-
113
- ▼CopePen（IEでは開きません）
114
-
115
- [https://codepen.io/0166/pen/ErOgLg](https://codepen.io/0166/pen/ErOgLg)
116
-
117
-
118
-
119
- ```HTML
120
-
121
- <input id="01" type="checkbox"><label for="01">あああ</label>
122
-
123
- <input id="02" type="checkbox"><label for="02">あああ</label>
124
-
125
- <input id="03" type="checkbox"><label for="03">あああ</label>
126
-
127
- ```
128
-
129
- ```CSS
130
-
131
- input {
132
-
133
- position: absolute;
134
-
135
- clip: rect(0, 0, 0, 0);
136
-
137
- pointer-events: none;
138
-
139
- }
140
-
141
- label {
142
-
143
- margin-right: 30px;
144
-
145
- background: url(https://placehold.jp/20x20.png) no-repeat;
146
-
147
- padding-left: 24px;
148
-
149
- height: 20px;
150
-
151
- vertical-align: -7px;
152
-
153
- }
154
-
155
- input:checked + label {
156
-
157
- background-image: url(https://placehold.jp/ff310f/ff310f/20x20.png);
158
-
159
- }
160
-
161
- ```

4

追記

2019/02/16 15:54

投稿

_sz
_sz

スコア21

test CHANGED
File without changes
test CHANGED
@@ -110,7 +110,7 @@
110
110
 
111
111
 
112
112
 
113
- ▼CopePen
113
+ ▼CopePen（IEでは開きません）
114
114
 
115
115
  [https://codepen.io/0166/pen/ErOgLg](https://codepen.io/0166/pen/ErOgLg)
116
116
 

3

解決

2019/02/16 02:36

投稿

_sz
_sz

スコア21

test CHANGED
File without changes
test CHANGED
@@ -99,3 +99,63 @@
99
99
  以上になります。
100
100
 
101
101
  よろしくお願い致します。
102
+
103
+
104
+
105
+ ###
106
+
107
+
108
+
109
+ 【解決】
110
+
111
+
112
+
113
+ ▼CopePen
114
+
115
+ [https://codepen.io/0166/pen/ErOgLg](https://codepen.io/0166/pen/ErOgLg)
116
+
117
+
118
+
119
+ ```HTML
120
+
121
+ <input id="01" type="checkbox"><label for="01">あああ</label>
122
+
123
+ <input id="02" type="checkbox"><label for="02">あああ</label>
124
+
125
+ <input id="03" type="checkbox"><label for="03">あああ</label>
126
+
127
+ ```
128
+
129
+ ```CSS
130
+
131
+ input {
132
+
133
+ position: absolute;
134
+
135
+ clip: rect(0, 0, 0, 0);
136
+
137
+ pointer-events: none;
138
+
139
+ }
140
+
141
+ label {
142
+
143
+ margin-right: 30px;
144
+
145
+ background: url(https://placehold.jp/20x20.png) no-repeat;
146
+
147
+ padding-left: 24px;
148
+
149
+ height: 20px;
150
+
151
+ vertical-align: -7px;
152
+
153
+ }
154
+
155
+ input:checked + label {
156
+
157
+ background-image: url(https://placehold.jp/ff310f/ff310f/20x20.png);
158
+
159
+ }
160
+
161
+ ```

2

バージョン情報

2019/02/16 02:35

投稿

_sz
_sz

スコア21

test CHANGED
File without changes
test CHANGED
@@ -5,6 +5,8 @@
5
5
  チェックボックスをカスタマイズしましたが、
6
6
 
7
7
  IEでだけ-webkit-appearance: none;が効かず、デフォルトの状態になっています。
8
+
9
+ ※IEのバージョンは11です。
8
10
 
9
11
 
10
12
 

1

リンク指定

2019/02/15 16:10

投稿

_sz
_sz

スコア21

test CHANGED
File without changes
test CHANGED
@@ -30,7 +30,7 @@
30
30
 
31
31
  ▼CodePen（IEでは開きません）
32
32
 
33
- https://codepen.io/0166/pen/xMymNX
33
+ [https://codepen.io/0166/pen/xMymNX](https://codepen.io/0166/pen/xMymNX)
34
34
 
35
35
 
36
36