Geek Answers Handbook

Put a radio button label over CSS

I need the ability to put labels for the switches above the selection, rather than left or right. Is there a way to use CSS that will give this effect?

THANKS!

+4
source share
4 answers

Instead of the following:

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

You can use this and create two separately:

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

I think I know what you're looking for, but correct me if I miss the mark. I assume that you want the radio buttons to be centered under their labels. It is much easier if you can add <br> 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 cleanup method to go to the next line.

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

+5
source

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

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

So, I know that this is not the answer you are looking for, but I would be embarrassed to see this type of layout. This is not a standard and it will let me go. Just my $ .02.

+1
source

More articles:


All Articles