选择带标签的单选按钮答案

【问题标题】：Selecting Radio Button w/ Label选择带标签的单选按钮
【发布时间】：2015-02-03 17:10:16
【问题描述】：

我试图通过隐藏单选按钮来设置单选按钮的样式，在按钮各自标签的背景中放置一个替代图像（有点像this technique）。无论如何，作为一个测试，我想看看我是否可以让这个 css 在单选按钮标签上工作：

input[type="radio"] + label {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    background:#000;
    cursor:pointer;
    color:red;
}

不幸的是，我无法在上面的 CSS 中得到任何影响标签的东西。

我正在生成带有以下内容的单选按钮：

<%= f.input :trademark_search, as: :radio_buttons, label: 'Would you like us to do a trademark search and provide advice regarding any issues we identify in relation to the name you have selected?', input_html: { class: 'form-control' } %>

它呈现以下 HTML：

<span class="radio">
  <label for="incorporation_trademark_search_true">
    <input id="incorporation_trademark_search_true" class="radio_buttons optional form-control" type="radio" value="true" name="incorporation[trademark_search]">
    Yes
  </label>
</span>
<span class="radio">
  <label for="incorporation_trademark_search_false">
    <input id="incorporation_trademark_search_false" class="radio_buttons optional form-control" type="radio" value="false" name="incorporation[trademark_search]">
    No
  </label>
</span>

无论如何，我真的很想弄清楚我在这里缺少什么。任何想法将不胜感激。

【问题讨论】：

您应该阅读 CSS 中的 + 选择器。这不会选择父级，它将选择一个兄弟级（紧随其后）。

标签： html ruby-on-rails css radio-button

【解决方案1】：

因此，+ 将选择紧随其后的兄弟姐妹。

这是正确的使用方法。

div {
  background: red;
  height: 10px;
}
div + span {
  display: block;
  height: 10px;
  background: blue;
}

<div></div>
<span></span>

然后这就是您尝试使用它的方式（选择父级）

div {
  background: red;
  height: 10px;
}
div + span {
  display: block;
  height: 10px;
  background: blue;
}

<div>
  <span></span>
</div>

如您所见，这是行不通的。

紧随其后的部分演示在这里，我在两者之间放了一个<i>。如您所见，它不起作用。

div {
  background: red;
  height: 10px;
}
div + span {
  display: block;
  height: 10px;
  background: blue;
}

<div></div>
<i></i>
<span></span>

【讨论】：