I'm experimenting with a method to style radio buttons by concealing them and inserting an alternative image as the background of the corresponding label (similar to this technique). In my test, I attempted to apply CSS to the radio button label:
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;
}
Regrettably, none of the styles from the aforementioned CSS are affecting the label.
The radio buttons are generated using the following:
<%= 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' } %>
This code renders the following 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>
I am determined to discover what I might be overlooking here. Any insights would be greatly valued.