Question

我无法突出显示第二个无线电按钮。从我的尝试中可以看出，我试图改变名称/值和组合。在一个形式和一个外面尝试。我对这段简单的代码感到困惑。任何人都可以指导我修复我的解决方案吗？

CSS：

.fb > input[type=radio]{
  display:none;
}
input[type=radio] + img{
  cursor:pointer;
  border:2px solid transparent;
}
input[type=radio]:checked + img{
  border:2px solid #f00;
}

HTML PART：

  <label class="fb" for="fb3">
    <input id="fb3" type="radio" name="fb" value="med" />
    <img src="http://placehold.it/40x40/35d/fff&text=f">
  </label>

<label class="fb" for="fb3">
    <input id="fb3" type="radio" name="fab" value="mead" />
    <img src="http://placehold.it/40x40/35d/fff&text=f">
  </label>

我试过的JSBIN：http://jsbin.com/ziruloce/3/edit

Answer 1

ID 必须才是唯一的。尝试：

<强> jsBin example

<form>
  <label class="fb" for="fb3">
    <input id="fb3" type="radio" name="fb" value="med" />
    <img src="http://placehold.it/40x40/35d/fff&text=f">
  </label>

<label class="fb" for="fb4">
    <input id="fb4" type="radio" name="fb" value="mead" />
    <img src="http://placehold.it/40x40/35d/fff&text=f">
  </label>
</form>

请注意，我还将单选按钮的名称设为相同。

HTML + CSS修改单选按钮仅选择第一个

1 个答案: