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();

很简单....

但是，当我在第一个中输入一些值textbox并按 enter a 时，它会将焦点转移到收音机上，但用户无法理解这一点，直到按下箭头键并且选择选项发生变化。

为了更改一些 CSS 并突出显示radio set焦点，我尝试了以下 CSS

#radio2 label:focus{

            color: red;
            border: 1px solid black;

        }
 #radio label:focus{

            color: red;
            border: 1px solid black;

        }

但是，它没有效果。

我的简单要求是，当textbox模糊时，我希望向用户显示某种突出显示或 CSS 更改（即使它在 parent 上DIV），以便用户可以知道当前radio set是活动输入。

4

1 回答 1

1

在 CSS 上使用相邻兄弟选择器

#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 回答