Choosing a Radio Button with a Labeled Option

Question

Choosing a Radio Button with a Labeled Option

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.

html ruby-on-rails css radio-button

Answer 1

Answer №1

One useful CSS selector to know is the + symbol, which selects a sibling element that immediately follows another.

Here is an example of how to correctly use this selector:

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

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

On the other hand, attempting to select a parent element using the + symbol will not work, as demonstrated below:

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

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

As shown above, selecting a parent element with the + symbol does not produce the desired result.

In this last demo, I added an <i> element in between the div and span elements to illustrate that the + selector only targets immediate sibling elements and cannot skip over others:

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

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

Answer 2

One useful CSS selector to know is the + symbol, which selects a sibling element that immediately follows another.

Here is an example of how to correctly use this selector:

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

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

On the other hand, attempting to select a parent element using the + symbol will not work, as demonstrated below:

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

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

As shown above, selecting a parent element with the + symbol does not produce the desired result.

In this last demo, I added an <i> element in between the div and span elements to illustrate that the + selector only targets immediate sibling elements and cannot skip over others:

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

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

Choosing a Radio Button with a Labeled Option

Answer №1

Similar questions

Stunning CSS Image Showcase

Form data is not being displayed by the Private Params method

Avoid the resetting of chosen value following a POST or submission

What is the best way to insert HTML elements in front of other HTML elements using a form and jQuery?

Struggled to Find a Solution for Code Alignment

"Utilizing an ellipsis within a span element in a table cell to achieve maximum cell

What factors must be considered before transitioning from an HTML4 web application to HTML5?

Which tag should I use, <b> or <mark>, to emphasize important marketing terms within a paragraph?

Determine the vertical dimension of a child division once it has been integrated into an HTML document

Enhance your message inbox experience with jQuery/Javascript features inspired by Gmail, including the ability to select all messages with a checkbox and

What could be causing Prettier code formatter to suddenly stop formatting in VS Code?

Should I use several if get statements on one page, or spread them out across multiple pages in PHP structure?

What is the best method for incorporating CSS into an Angular application's embedded PowerBI report, which is displayed

Verifying the angular form without the need for a submit button

Tips for centering links in the navigation bar on Bootstrap 5 when viewing in a small size

Position the text so that it is aligned below and to the right of the text box

How can you determine the class of an element that was clicked within an iframe?

Unable to switch the text option

The problem of Twitter Bootstrap 2 top navigation dropdown not functioning properly on mobile devices

Eliminate any unnecessary gaps that may exist between the cards within the deck