★アイコンのラジオフォームの横にラベルを表示する方法
作成日：
2019年8月7日
先日Font Awesomeで★アイコンのラジオフォームをJS無しで作成する方法で評価レビューで使う★アイコンのラジオフォームを作成しましたが、ここに選択した★数に応じて横にラベルを表示する方法を試してみました。
と言っても作成はこれまたシンプルです。
コードサンプル
ポイントは
- 親要素に
position: relative;を追加 - labelに表示ラベル用のデータ属性（
data-label="***"）を追加 - CSSで選択した（チェックした）ラジオボタンのラベル値を
content: attr(data-label);で表示
となります。
positionを調整すれば横だけでなく、下に表示したりすることも簡単です。
物草 灸太郎
WordPressでホームページを制作しつつ、休日は畑を耕したりDIYを楽しんでいます。
関連投稿
Loading...
コメントをどうぞ