Positioning radiobuttons and Labels vertically in pure css

The following HTML is generated from a library and cannot be changed in any way, so I need a CSS only solution for my problem. I would like for the radio buttons to appear vertically instead of left to right to each other like so

This is my code.

<span class="buttonset" id="test">

      <input type="radio" id="test_1" name="test" value="CC">
      <label for="test_1">Option 1</label>

      <input type="radio" id="test_2" name="test" value="PL">
      <label for="test_2">Option 2</label>

      <input type="radio" id="test_3" name="test" value="AL">
      <label for="test_3">Option 3</label>

      <input type="radio" id="test_4" name="test" value="HL">
      <label for="test_4">Option 4</label>

      <input type="radio" id="test_5" name="test" value="CL">
      <label for="test_5">Option 5</label>

      <input type="radio" id="test_6" name="test" value="CL">
      <label for="test_6">Option 6</label>

  </span>

See also http://jsfiddle.net/QHvhs/ Is there a pure CSS way to get a new line after each input and label element?

Answers


you can use css3 pseudo selector :after to insert a line break after every label, making the list vertical.

.buttonset label:after {
    content:"\A"; 
    white-space:pre;
}

live demo: Fiddle


You just need to warp each pair with another element(div), also i would use div instead of the span:

<div class="buttonset" id="test">
    <div>
        <input type="radio" id="test_1" name="test" value="CC">
        <label for="test_1">Option 1</label>
    </div>
    <div>
        <input type="radio" id="test_2" name="test" value="PL">
        <label for="test_2">Option 2</label>
    </div>
    <div>
        <input type="radio" id="test_3" name="test" value="AL">
        <label for="test_3">Option 3</label>
    </div>
    <div>
        <input type="radio" id="test_4" name="test" value="HL">
        <label for="test_4">Option 4</label>
    </div>
    <div>
        <input type="radio" id="test_5" name="test" value="CL">
        <label for="test_5">Option 5</label>
    </div>
    <div>
        <input type="radio" id="test_6" name="test" value="CL">
        <label for="test_6">Option 6</label>
    </div>
</div>

This is more semantically better.

You shouldn't have the form elements inside of a SPAN, but rather use DIV.

<span class="buttonset" id="test"> 

to

<div class="buttonset" id="test">

And the way you should wrap LABEL is

<label for="test_6"><input type="radio" id="test_6" name="test" value="CL"> Option 6</label>

You can then use CSS selector in a better semantic way

.buttonset label {
    display: block;
}

Need Your Help

Issues in Integrating Authorize.net API's for android

java android android-activity authorize.net

I want to integrate my app with Authorize.Net. I have followed the Steps given in tutorial http://developer.authorize.net/integration/fifteenminutes/android/.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.