★アイコンのラジオフォームの横にラベルを表示する方法

★アイコンのラジオフォームの横にラベルを表示する方法



先日Font Awesomeで★アイコンのラジオフォームをJS無しで作成する方法で評価レビューで使う★アイコンのラジオフォームを作成しましたが、ここに選択した★数に応じて横にラベルを表示する方法を試してみました。

と言っても作成はこれまたシンプルです。

ポイントは

  • 親要素にposition: relative;を追加
  • labelに表示ラベル用のデータ属性(data-label=”***”)を追加
  • CSSで選択した(チェックした)ラジオボタンのラベル値をcontent: attr(data-label);で表示

となります。

positionを調整すれば横だけでなく、下に表示したりすることも簡単です。

今日はここまで

関連する記事



こちらはいかが?


コメントを残す