Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I make multi-line, vertically and horizontally aligned labels for radio buttons in HTML Forms with CSS?

Assuming the following markup:

<fieldset>
    <legend>Radio Buttons</legend>
    <ol>
        <li>
            <input type="radio" id="x">
            <label for="x"><!-- Insert multi-line markup here --></label>
        </li>
        <li>
            <input type="radio" id="x">
            <label for="x"><!-- Insert multi-line markup here --></label>
        </li>
    </ol>
</fieldset>

How do I style radio button labels so that they look like the following in most browsers (IE6+, FF, Safari, Chrome:

Radio Button Labels

like image 418
Patrick Klingemann Avatar asked May 26 '09 16:05

Patrick Klingemann


People also ask

How do I align two radio buttons horizontally in CSS?

To make a horizontal radio button set, add the data-type="horizontal" to the fieldset . The framework will float the labels so they sit side-by-side on a line, hide the radio button icons and only round the left and right edges of the group.

How do you keep a radio button and label on the same line?

As a quick solution either you can apply colspan for your td or You can have both the radio button controls in same td so that the change due to long text wont affect the display of radiobutton.

How are radio buttons in HTML grouped together?

Defining a radio groupA radio group is defined by giving each of radio buttons in the group the same name . Once a radio group is established, selecting any radio button in that group automatically deselects any currently-selected radio button in the same group.


2 Answers

Since I asked how to handle really long labels above, and I finally solved it myself. Here is the solution to my problem. Maybe it could help you to?

<style type="text/css">
  #master_frame { 
      background: #BBB;
      height: 300px;
      width: 300px;
  } 
  fieldset.radios { 
      border: none;
  } 
  fieldset fields { 
      clear: both;
  } 
  input { 
      float: left;
      display: block;
  } 
  label { 
      position: relative;
      margin-left: 30px;
      display: block;
  } 
</style>

<div id="master_frame">
  <fieldset class='radios'>
    <div class='field'>
      <input type="radio" id="a" />
      <label for="a">Short</label>
    </div>
    <div class='field'>
      <input type="radio" id="b" />
      <label for="b">
        A really long and massive text that does not fit on one row!
      </label>
    </div>
  </fieldset>
</div>
like image 116
UlfR Avatar answered Sep 20 '22 21:09

UlfR


I believe this does it all. You didn't mention that it has to validate, however, so I used the inline-block (-moz-inline-box) display. One of my favorites, actually.

Here's a working copy

Tested in Safari 3, FireFox 3, and IE7.

    <style type="text/css">
ol{
    padding-left: 0;
    margin-left:0;
}

ol>li {
    list-style-type: none;
    margin-bottom: .5em;
}

ol>li input[type=radio] {
    display: -moz-inline-box;
    display: inline-block;
    vertical-align: middle;
}

ol>li label {
    display: -moz-inline-box;
    display: inline-block;
    vertical-align: middle;
}
</style>
like image 26
Ryan Florence Avatar answered Sep 20 '22 21:09

Ryan Florence