質問編集履歴
5
編集
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -48,34 +48,4 @@
|
|
|
48
48
|
|
|
49
49
|
|
|
50
50
|
以上になります。
|
|
51
|
-
よろしくお願い致します。
|
|
51
|
+
よろしくお願い致します。
|
|
52
|
-
|
|
53
|
-
###
|
|
54
|
-
|
|
55
|
-
【解決】
|
|
56
|
-
|
|
57
|
-
▼CopePen（IEでは開きません）
|
|
58
|
-
[https://codepen.io/0166/pen/ErOgLg](https://codepen.io/0166/pen/ErOgLg)
|
|
59
|
-
|
|
60
|
-
```HTML
|
|
61
|
-
<input id="01" type="checkbox"><label for="01">あああ</label>
|
|
62
|
-
<input id="02" type="checkbox"><label for="02">あああ</label>
|
|
63
|
-
<input id="03" type="checkbox"><label for="03">あああ</label>
|
|
64
|
-
```
|
|
65
|
-
```CSS
|
|
66
|
-
input {
|
|
67
|
-
position: absolute;
|
|
68
|
-
clip: rect(0, 0, 0, 0);
|
|
69
|
-
pointer-events: none;
|
|
70
|
-
}
|
|
71
|
-
label {
|
|
72
|
-
margin-right: 30px;
|
|
73
|
-
background: url(https://placehold.jp/20x20.png) no-repeat;
|
|
74
|
-
padding-left: 24px;
|
|
75
|
-
height: 20px;
|
|
76
|
-
vertical-align: -7px;
|
|
77
|
-
}
|
|
78
|
-
input:checked + label {
|
|
79
|
-
background-image: url(https://placehold.jp/ff310f/ff310f/20x20.png);
|
|
80
|
-
}
|
|
81
|
-
```
|
4
追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
|
|
55
55
|
【解決】
|
|
56
56
|
|
|
57
|
-
▼CopePen
|
|
57
|
+
▼CopePen（IEでは開きません）
|
|
58
58
|
[https://codepen.io/0166/pen/ErOgLg](https://codepen.io/0166/pen/ErOgLg)
|
|
59
59
|
|
|
60
60
|
```HTML
|
3
解決
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -48,4 +48,34 @@
|
|
|
48
48
|
|
|
49
49
|
|
|
50
50
|
以上になります。
|
|
51
|
-
よろしくお願い致します。
|
|
51
|
+
よろしくお願い致します。
|
|
52
|
+
|
|
53
|
+
###
|
|
54
|
+
|
|
55
|
+
【解決】
|
|
56
|
+
|
|
57
|
+
▼CopePen
|
|
58
|
+
[https://codepen.io/0166/pen/ErOgLg](https://codepen.io/0166/pen/ErOgLg)
|
|
59
|
+
|
|
60
|
+
```HTML
|
|
61
|
+
<input id="01" type="checkbox"><label for="01">あああ</label>
|
|
62
|
+
<input id="02" type="checkbox"><label for="02">あああ</label>
|
|
63
|
+
<input id="03" type="checkbox"><label for="03">あああ</label>
|
|
64
|
+
```
|
|
65
|
+
```CSS
|
|
66
|
+
input {
|
|
67
|
+
position: absolute;
|
|
68
|
+
clip: rect(0, 0, 0, 0);
|
|
69
|
+
pointer-events: none;
|
|
70
|
+
}
|
|
71
|
+
label {
|
|
72
|
+
margin-right: 30px;
|
|
73
|
+
background: url(https://placehold.jp/20x20.png) no-repeat;
|
|
74
|
+
padding-left: 24px;
|
|
75
|
+
height: 20px;
|
|
76
|
+
vertical-align: -7px;
|
|
77
|
+
}
|
|
78
|
+
input:checked + label {
|
|
79
|
+
background-image: url(https://placehold.jp/ff310f/ff310f/20x20.png);
|
|
80
|
+
}
|
|
81
|
+
```
|
2
バージョン情報
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
チェックボックスをカスタマイズしましたが、
|
|
4
4
|
IEでだけ-webkit-appearance: none;が効かず、デフォルトの状態になっています。
|
|
5
|
+
※IEのバージョンは11です。
|
|
5
6
|
|
|
6
7
|
カスタマイズの方法としては、
|
|
7
8
|
inputのデフォルトのスタイルを-webkit-appearance: none;で消した後、
|
1
リンク指定
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
よろしくお願い致します。
|
|
15
15
|
|
|
16
16
|
▼CodePen（IEでは開きません）
|
|
17
|
-
https://codepen.io/0166/pen/xMymNX
|
|
17
|
+
[https://codepen.io/0166/pen/xMymNX](https://codepen.io/0166/pen/xMymNX)
|
|
18
18
|
|
|
19
19
|
```HTML
|
|
20
20
|
<input id="01" type="checkbox"><label for="01">あああ</label>
|