Place Radio Button Label Above Using CSS

Question

I need the ability to place the labels for radio buttons above the selections, and not to the left or the right. Is there a way to use CSS that would give this effect?

THanks!

Solution 1

I think I know what you are looking for, but correct me if I'm missing the mark. I'm assuming you will want the radio buttons centered under their labels. This is a lot easier if you are okay with adding <br>s to your markup.

label {
  float: left;
  padding: 0 1em;
  text-align: center;
}

<label for="myChoice1">Choice 1<br />
  <input type="radio" id="myChoice1" name="myChoice" value="1" />
</label>

<label for="myChoice2">Choice ABC<br />
  <input type="radio" id="myChoice2" name="myChoice" value="ABC" />
</label>

<label for="myChoice3">Choice qwerty<br />
  <input type="radio" id="myChoice3" name="myChoice" value="qwerty" />
</label>

<label for="myChoice4">Choice--final<br />
  <input type="radio" id="myChoice4" name="myChoice" value="final" />
</label>

...and then use your own clearing method to move to the next line.

(The use of the for attribute in the <label>s is a little redundant here, but it won't hurt anything.)

Solution 2

Instead of the following:

<label>Label <input type="radio" id="val" name="val" value="hello"></label>

You can use this and style the two separately:

<label for="val">Label</label>
<input type="radio" id="val" name="val" value="hello">

Solution 3

I can't be more specific without seeing exactly what layout you are going for, but if you just want to get the label above the radio button, use display:block on the radio button. (obviously, this is inline just as an example)

<label>Label <input style="display:block;" type="radio" id="val" name="val" value="hello" /></label>

Solution 4

So I know this isn't the answer you are looking for, but I would be confused to see that type of layout. It is not standard and it would put me off. Just my $.02.

View more solutions

Comments

[Admin]

Currently this is how the page is set up, and the label will appear to the left.

[Admin]

I would agree, we typically don't use this design, but because of the width of the question being asked, and due to wanting to save horizontal real estate, our IA would prefer this layout.

[jcollum]

Ed's point is valid. If this layout is a little "odd" then it will cause issues with cross-browser and end-user.

[kafuchau]

That code just displays the radio button immediately after the label, doesn't it? Shouldn't you have some kind of break between them first, possibly each in its own row, or add in a line break?