☰

ラジオボタンとラベルのスタイル（CSS）を設定するにはどうすればいいですか？質問する

tag-icon • tag-icon html css radio-button styles
ラジオボタンとラベルのスタイル（CSS）を設定するにはどうすればいいですか？質問する

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

<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 スタイルを使用していることを述べておきます。これらに詳しくない場合は、次の場所を参照してください。

両方のドキュメントはここにあります:Yahoo! UI ライブラリ

@pkaeding: ありがとうございます。フローティング 2 つを試してみましたが、見た目がおかしくなりました。アクティブなラジオ ボタンのスタイル設定は、Google 検索で input[type=radio]:active を指定すれば実行できるようですが、正常に動作しませんでした。つまり、質問はもっと次のようになります。これは、今日のすべてのモダン ブラウザーで可能ですか。不可能な場合、必要な最小限の JS は何ですか。

ベストアンサー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これを IE で動作させるには、 およびフックblurが必要です。

おすすめ記事