【Ruby on Rails5】チェックボックスを作るとき、"checkbox" を使わずにアイコンで表示させたときの記事

課題

• Fontawesomeのチェックマークを使い、チェックボックスを作りたい
• アイコンを□で囲み、アイコンをクリックしたときにデータベースにチェック済みとして保存
• チェック済みでない場合、アイコンだけを消し、□は残しておきたい

作成の流れ

• Fontawesomeを使ってチェックマークを表示
• アイコンをborderを使って□で囲んだ
• □は残したまま、チェック済みではない場合、アイコンだけを透明にしようとした

悩んだところ

• opacityを使うとborderで作った枠線も一緒に消えてしまう
• 透明状態のアイコンとそうではないアイコンを同時に表示させなきゃいけない

解決策

• rgbaを使えばテキストのみの透明度を変更できる、という記事があったのでイラストでも同じ結果にならないかと思い試してみたらできた。
• 透明状態のアイコンでそうではないアイコンを混同させないように透明アイコンに新しいクラスを追加

実際のコード

html.erb

<!-- 透明アイコンの表示 -->
<i class="fa fa-solid fa-check rgb-0"></i>

home.css

/* チェックアイコン*/
.fa-check{
    font-weight: 900;
    border: solid 1px #000;
}

/* 透明化用　*/
.rgb-0{
    color: rgb(0, 0, 0,0);
}