CSSだけでラジオボタンを選択した時のスタイルを変更する

harada 1,791views 更新:2014年4月2日

ラジオボタンで選択したテキストのスタイルを太字にする場合です。

HTML

<label>
  <input type="radio" onclick="planChange();" value="S" name="planChangeFlag">
  バリュープラン:<span class="ml5">1ユーザーあたり月額 </span><span class="setPrice">¥0</span></label>
<label>
  <input type="radio" onclick="planChange();" value="M" name="planChangeFlag">
  スタンダードプラン:<span class="ml5">1ユーザーあたり月額 </span><span class="setPrice">¥200</span></label>
<label>
  <input type="radio" onclick="planChange();" value="L" name="planChangeFlag">
  プラチナプラン:<span class="ml5">1ユーザーあたり月額 </span><span class="setPrice">¥500</span></label

CSS

input[name="planChangeFlag"]:checked ~ span.setPrice {
font-weight:bold;
}

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません