Q&A
ありがとうございました！
前提
HTML, CSSを用いて、クリックすると色が変わるハート型のボタンを作りたいと思っています。(方法は様々あると思っていて、一番やりやすそうなCSSのみを用いる方法を試しました。javaScriptでも大丈夫です。) 具体的には、ハート型のボタンを押すと、緑色に変化するボタンを作りたいです。
発生している問題・エラーメッセージ
コードを見ていただけるとわかると思うのですが、ハートマークとチェックボックスが対応していません。どのように変更すればいいでしょうか？
該当のソースコード
20220721_2.html
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4<style> 5.example2{ 6 display: flex; 7} 8.example2 label{ 9 position: absolute; 10 width: 50px; 11 height: 40px; 12 /*keep #heart inside the #favorite*/ 13 right: 10%; 14 bottom: 10%; 15} 16.example2 label:before, 17.example2 label:after { 18 position: absolute; 19 content: ""; 20 left: 25px; 21 top: 0; 22 width: 25px; 23 height: 40px; 24 background: #f88dc8; 25 border-radius: 50px 50px 0 0; 26 transform: rotate(-45deg); 27 transform-origin: 0 100%; 28} 29.example2 label:after { 30 left: 0; 31 transform: rotate(45deg); 32 transform-origin :100% 100%; 33} 34.example2 input:checked+label{ 35 background: #1a720d; 36 color: #FFF; 37} 38.example2 input{ 39 display: none; 40} 41</style> 42 </head> 43 <body> 44<div class="example2"> 45 <input type="checkbox" checked id="1" name="example2"><label for="1"></label> 46</div> 47 </body> 48</html>
回答2件
0
css
1<link rel ="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"> 2<style> 3.heart input{ 4display:none; 5} 6.heart i{ 7color:red; 8} 9.heart input:checked ~ i{ 10color:green; 11} 12</style> 13<label class="heart"><input type="checkbox"><i class="fa fa-heart"></i></label> 14<label class="heart"><input type="checkbox"><i class="fa fa-heart"></i></label> 15<label class="heart"><input type="checkbox"><i class="fa fa-heart"></i></label>
投稿2022/07/22 00:19
総合スコア117709
0
ベストアンサー
css
1.example2 input:checked+label{ 2 background: #1a720d; 3 color: #FFF; 4}
上記の部分を下記に修正
css
1.example2 input:checked+label:before, 2.example2 input:checked+label:after { 3 background: #1a720d; 4 color: #FFF; 5}
以上でどうでしょう。
投稿2022/07/21 18:04
総合スコア34362
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。