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!

Answer 1

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.

Answer 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">

Answer 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>

Answer 4

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.

CSS

<style type="text/css">

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

</style>

HTML

<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.)