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

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
参考
HTML Snippets for Twitter Boostrap framework : Bootsnipp.com

Awesome Bootstrap HTML CSS JS Snippet on Bootsnipp.com.

HTML Snippets for Twitter Boostrap framework : Bootsnipp.com Bootsnipp.com


今日はここまで

関連する記事



こちらはいかが?


コメントを残す