Font Awesomeで★アイコンのラジオフォームをJS無しで作成する方法

作成日:

Amazonや楽天など、多くのショッピングサイトで実装されている★数を選択して評価するフォーム。

複数の選択肢から1つの値を選択するフォームとしては、セレクトフォームとラジオフォームがありますが、今回はラジオフォームとFont Awesomeのアイコンフォントを用いて作成してみます(※Bootstrapをベースにしています)。

と言っても作成はやってみると非常にシンプルで以下の通りです。

コードサンプル

ポイントは

  • inputは隠して代わりにFont Awesomeのアイコンのみ表示
  • ラジオフォームは5から1へ降順に並べてマークアップし、親要素にd-flex flex-row-reverseクラスを付加して逆表示
  • CSSで選択した(チェックした)ラジオボタンの色を変更
  • 子孫セレクタ(~)を用いて、選択したラジオボタンの子孫ボタンも同様に色を変更

となります。

これでJSを使用することなく、HTML+CSSのみでアイコンラジオフォームを作成することが出来ました。

HTML Snippets for Twitter Boostrap framework : Bootsnipp.com https://bootsnipp.com/snippets/z2Ep8

Awesome Bootstrap HTML CSS JS Snippet on Bootsnipp.com.

CSS Checkbox/Radio buttons with Font Awesome https://codepen.io/ksycz/pen/bMJyBP

Custom CSS checkboxes using the Font Awesome icon font...

物草 灸太郎

WordPressでホームページを制作しつつ、休日は畑を耕したりDIYを楽しんでいます。

コメントをどうぞ

  • メールアドレスが公開されることはありません。
  • コメント欄にURLは入力できません。
  • このサイトはreCAPTCHAによって保護されており、Googleのプライバシーポリシー利用規約が適用されます。