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

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



国内最速・高安定の高性能レンタルサーバー【ConoHa WING】

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


CSS Checkbox/Radio buttons with Font Awesome
参考
CSS Checkbox/Radio buttons with Font Awesome

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

CSS Checkbox/Radio buttons with Font Awesome CodePen

今日はここまで

コメントを残す

メールアドレスが公開されることはありません。