我试图通过隐藏它们来设置单选按钮的样式,将替换图像放在按钮各自标签的背景中(类似于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>
无论如何,我真的想弄清楚我在这里缺少什么。任何想法都将不胜感激。
答案 0 :(得分:1)
这是如何工作的+
将选择紧随其后的兄弟。
这是使用它的正确方法。
div {
background: red;
height: 10px;
}
div + span {
display: block;
height: 10px;
background: blue;
}
&#13;
<div></div>
<span></span>
&#13;
然后这就是你尝试使用它的方式(选择父母)
div {
background: red;
height: 10px;
}
div + span {
display: block;
height: 10px;
background: blue;
}
&#13;
<div>
<span></span>
</div>
&#13;
正如您所看到的那样无效。
紧接着这里的部分演示,我在其间放了一个<i>
。你可以看到它不起作用。
div {
background: red;
height: 10px;
}
div + span {
display: block;
height: 10px;
background: blue;
}
&#13;
<div></div>
<i></i>
<span></span>
&#13;