ラジオ ボタンとラベルをスタイル (CSS) するにはどうすればよいですか?

Question

以下のコードの場合、ラジオ ボタンをラベルの隣にスタイル設定し、選択したラジオ ボタンのラベルを他のラベルとは異なるスタイルにするにはどうすればよいでしょうか?

<link href="http://yui.yahooapis.com/2.5.2/build/reset-fonts-grids/reset-fonts-grids.css" rel="stylesheet">
<link href="http://yui.yahooapis.com/2.5.2/build/base/base-min.css" rel="stylesheet">

<div class="input radio">
  <fieldset>
    <legend>What color is the sky?</legend>
    <input type="hidden" name="color" value="" id="SubmitQuestion" />
    <input type="radio" name="color" id="SubmitQuestion1" value="1"  />
    <label for="SubmitQuestion1">A strange radient green.</label>
    <input type="radio" name="color" id="SubmitQuestion2" value="2"  />
    <label for="SubmitQuestion2">A dark gloomy orange</label>
    <input type="radio" name="color" id="SubmitQuestion3" value="3"  />
    <label for="SubmitQuestion3">A perfect glittering blue</label>
  </fieldset>
</div>

また、ベースとして yui CSS スタイルを使用していることも述べておきます。これらに詳しくない場合は、ここで見つけることができます。

• リセット-フォント-グリッド.css
• 基本-min.css

両方のドキュメントはここにあります: ヤフー！UIライブラリ

@pkaeding:ありがとう。両方を浮かせてみましたが、めちゃくちゃに見えました。スタイリングアクティブラジオボタンは、Google 検索で input[type=radio]:active を指定すると実行できるように見えましたが、適切に機能しませんでした。したがって、私が推測する質問はさらに次のとおりです。これは今日のすべての最新ブラウザで可能ですか? 不可能な場合、必要な最小限の JS は何ですか?

Answer 1

質問の最初の部分は HTML と CSS だけで解決できます。2 番目の部分では Javascript を使用する必要があります。

ラジオボタンの近くのラベルを取得する

「隣」というのが何を意味するのかわかりませんが、同じラインの近くにありますか、それとも別のラインにありますか?すべてのラジオ ボタンを同じ行に配置したい場合は、余白を使用してラジオ ボタンを離してください。それぞれを独自の行に配置したい場合は、2 つのオプションがあります (冒険したくない場合を除く)。 float: 地域）：

• 使用 <br />s オプションを分割し、いくつかの CSS を使用して垂直方向に配置します。

<style type='text/css'>
    .input input
    {
        width: 20px;
    }
</style>
<div class="input radio">
    <fieldset>
        <legend>What color is the sky?</legend>
        <input type="hidden" name="data[Submit][question]" value="" id="SubmitQuestion" />

        <input type="radio" name="data[Submit][question]" id="SubmitQuestion1" value="1"  />
        <label for="SubmitQuestion1">A strange radient green.</label>
        <br />
        <input type="radio" name="data[Submit][question]" id="SubmitQuestion2" value="2"  />
        <label for="SubmitQuestion2">A dark gloomy orange</label>
        <br />
        <input type="radio" name="data[Submit][question]" id="SubmitQuestion3" value="3"  />
        <label for="SubmitQuestion3">A perfect glittering blue</label>
    </fieldset>
</div>

• フォローする 別のリストさんの記事: より美しくアクセシブルなフォーム

現在選択されているラベル + ラジオ ボタンにスタイルを適用する

スタイリング <label> そのため、JavaScript を使用する必要があります。みたいな図書館 jQueryこれに最適です:

<style type='text/css'>
    .input label.focused
    {
        background-color: #EEEEEE;
        font-style: italic;
    }
</style>
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript'>
    $(document).ready(function() {
        $('.input :radio').focus(updateSelectedStyle);
        $('.input :radio').blur(updateSelectedStyle);
        $('.input :radio').change(updateSelectedStyle);
    })

    function updateSelectedStyle() {
        $('.input :radio').removeClass('focused').next().removeClass('focused');
        $('.input :radio:checked').addClass('focused').next().addClass('focused');
    }
</script>

の focus そして blur これを IE で機能させるにはフックが必要です。

Answer 2

CSS3 対応のブラウザでは、 隣接する兄弟セレクター ラベルのスタイルを設定するため

input:checked + label {
    color: white;
}  

MDNの ブラウザ互換性表 基本的に、デスクトップとモバイルの両方で、現在人気のあるブラウザ (Chrome、IE、Firefox、Safari) のすべてに互換性があると述べています。

Answer 3

これにより、少なくともボタンとラベルが隣り合うようになります。2 番目の部分は CSS だけでは実行できず、JavaScript が必要になると思います。その部分でも役立つかもしれないページを見つけましたが、今はそれを試す時間がありません。 http://www.webmasterworld.com/forum83/6942.htm

<style type="text/css">
.input input {
  float: left;
}
.input label {
  margin: 5px;
}
</style>
<div class="input radio">
    <fieldset>
        <legend>What color is the sky?</legend>
        <input type="hidden" name="data[Submit][question]" value="" id="SubmitQuestion" />

        <input type="radio" name="data[Submit][question]" id="SubmitQuestion1" value="1"  />
        <label for="SubmitQuestion1">A strange radient green.</label>

        <input type="radio" name="data[Submit][question]" id="SubmitQuestion2" value="2"  />
        <label for="SubmitQuestion2">A dark gloomy orange</label>
        <input type="radio" name="data[Submit][question]" id="SubmitQuestion3" value="3"  />
        <label for="SubmitQuestion3">A perfect glittering blue</label>
    </fieldset>
</div>