回答編集履歴
1
調整
answer
CHANGED
|
@@ -16,4 +16,20 @@
|
|
|
16
16
|
</script>
|
|
17
17
|
<span>商品名A<i class="fa-regular fa-heart"></i></span>
|
|
18
18
|
<span>商品名B<i class="fa-regular fa-heart"></i></span>
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
# jsなし、html+cssで対応
|
|
22
|
+
```html
|
|
23
|
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" />
|
|
24
|
+
<style>
|
|
25
|
+
.fa-solid{color:red;}
|
|
26
|
+
.fa-regular{color:gray;}
|
|
27
|
+
label [type=checkbox]{display:none;}
|
|
28
|
+
label [type=checkbox]:checked ~ .fa-regular ,
|
|
29
|
+
label [type=checkbox]:not(:checked) ~ .fa-solid{
|
|
30
|
+
display:none;
|
|
31
|
+
}
|
|
32
|
+
</style>
|
|
33
|
+
<label>商品名A<input type="checkbox"><i class="fa-solid fa-heart"></i><i class="fa-regular fa-heart"></i></label>
|
|
34
|
+
<label>商品名B<input type="checkbox"><i class="fa-solid fa-heart"></i><i class="fa-regular fa-heart"></i></label>
|
|
19
35
|
```
|