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

作成日:

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


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

コードサンプル

ポイントは

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

となります。

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

物草 灸太郎
物草 灸太郎

WordPressでホームページを制作しつつ、休日は畑を耕したりDIYを楽しんでいます。

Loading...

コメントをどうぞ

  • メールアドレスが公開されることはありません。
  • コメント欄にURLは入力できません。
  • このサイトはreCAPTCHAによって保護されており、Googleのプライバシーポリシー利用規約が適用されます。