da 40

I'm trying to achieve the following with a list of radio buttons or checkboxes:

() item

() item

() item

The html for each item is as such:

     <label><input>label text</label>

I want the label text to be 'clickable' but not the space to the right of it. Right now, I'm setting each LABEL to display: block which has the side effect of making the white-space to the right of the text also clickable.

This is interfering with other interactions on the page so am trying to avoid that.

Is there a clever way to do this without resorting to a wrapper of some sort? A wrapper around the LABEL would work, but I'm trying to avoid extra HTML.

I did try

label {
    float: left;
    clear: left;
 }

Which works but only if you aren't adding additional markup in between each LABEL (which we are doing to allow for sub-options in the form).

1 answer

3
points
This was chosen as the best answer

You're going to end up with unnecessarily complicated CSS using a "clever" way. The basic idea would be to float your labels, set them to block display, and assign a width. However, I highly recommend against doing that. Instead, you should use a wrapper like so:

HTML:

<ul class="radio-list">
  <li><input type="radio" id="radio1"/><label for="radio1">label text</label></li>
  <li><input type="radio" id="radio2"/><label for="radio2">label text</label></li>
  <li><input type="radio" id="radio3"/><label for="radio3">label text</label></li>
</ul>

CSS:

ul.radio-list
{
  list-style: none;
}

There, that wasn't so bad, now was it?

Answered almost 7 years ago by Geoffrey Lee
  • Geoffrey...I was pretty much coming to the same conclusion. I'm not a huge fan of putting everything in a form into a list structure (seems redundant and may introduce accessibility issues) but it certainly seems to make sense for a list of radios or check boxes. And I agree, the LI wrappers is a much smaller addition than 'clever' CSS to get around the issue. da almost 7 years ago