0

サンプルコードhttp://jsfiddle.net/ESDUD/を参照してください

HTML

<input type='text' id='abc'>
<br>
NIGHT <div id="radio">
    <input type='radio' name='myradio1' id='final' value='1'/>
    <label for="final" title='FINAL'>FINAL</label>

    <input type='radio' name='myradio1' id='maybe' value='2'/>
    <label for="maybe"  title='MAYBE'>MAYBE</label>

    <input type='radio' id='noways' name='myradio1' value='3' checked="checked" />
     <label for="noways"  title='NO WAYS'>No WAYS</label>
</div>
DAY <div id="radio2">
    <input type='radio' name='myradio2' id='final2' value='1' checked="checked" />
    <label for="final2" title='FINAL'>FINAL</label>

    <input type='radio' name='myradio2' id='maybe2' value='2'/>
    <label for="maybe2"  title='MAYBE'>MAYBE</label>

    <input type='radio' id='noways2' name='myradio2' value='3' />
     <label for="noways2"  title='NO WAYS'>No WAYS</label>
</div>

JS

$("#radio").buttonset();
$("#radio2").buttonset();

ものすごく単純....

しかし、最初に値を入力してtextboxEnter キーを押すと、ラジオ セットにフォーカスが移動しますが、矢印キーを押して選択オプションが変更されるまで、ユーザーはそれを理解できません。

いくつかの CSS を変更radio setしてフォーカスを強調表示するために、次の CSS を試しました

#radio2 label:focus{

            color: red;
            border: 1px solid black;

        }
 #radio label:focus{

            color: red;
            border: 1px solid black;

        }

しかし、それは効果がありません。

私の単純な要件は、textboxがぼやけているときに、ある種の強調表示または CSS の変更 (親にある場合でもDIV) をユーザーに表示して、ユーザーが現在radio setアクティブな入力であることを知ることができるようにすることです。

4

1 に答える 1

1

CSS でAdjacent sibling セレクターを使用する

#radio input:focus + label,
#radio2 input:focus + label {
    color: red;
    border: 1px solid black;
}

現在のセレクター#radio label:focusはフォーカスされたすべてのラベルを選択しますが、これは探しているものではありません。

jsFiddle Demo

于 2013-09-05T09:23:33.183 に答える