Question

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中输入一些值并按下输入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更改（即使它在父DIV上），以便用户可以知道当前radio set是活动输入。

Answer 1

使用CSS上的Adjacent sibling selector

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

您当前的选择器#radio label:focus会选择所有有针对性的标签，而不是您正在寻找的标签。

jsFiddle Demo

突出显示多个jQuery Radio Set

1 个答案: