Font Awesomeで★アイコンのラジオフォームをJS無しで作成する方法
作成日：
2019年8月7日
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を楽しんでいます。
関連投稿
Loading...
コメントをどうぞ