31

次のコードを前提として、ラジオボタンのスタイルをラベルの横に配置し、選択したラジオボタンのラベルのスタイルを他のラベルとは異なる方法にするにはどうすればよいですか。

<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>

また、私はyuicssスタイルをベースとして使用していることを述べさせてください。あなたがそれらに精通していない場合、それらはここで見つけることができます：

両方のドキュメントはこちら：Yahoo！UIライブラリ

@pkaeding：ありがとう。ぐちゃぐちゃに見えた両方を浮かせてみました。アクティブなラジオボタンのスタイリングは、一部のinput [type = radio]：google検索でのアクティブな指名で実行できるように見えましたが、正しく機能しませんでした。ですから、私が推測する質問はもっとあります。これは、今日のすべての最新のブラウザーで可能ですか。そうでない場合、必要な最小限のJSは何ですか。

4

3 に答える 3

33

質問の最初の部分は、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>

IE でこれを機能させるには、focusおよびblurフックが必要です。

于 2008-09-04T15:49:41.010 に答える
27

CSS3対応のブラウザーでは、隣接する兄弟セレクターを使用してラベルのスタイルを設定できます。

input:checked + label {
    color: white;
}

MDNのブラウザ互換性表によると、デスクトップとモバイルの両方で、現在人気のあるすべてのブラウザ（Chrome、IE、Firefox、Safari）に互換性があります。

于 2008-09-04T16:03:16.330 に答える
5

これにより、少なくともボタンとラベルが隣り合うようになります。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>
于 2008-09-04T12:56:41.723 に答える