I have a question regarding radio button in Visualforce page, Is it possible to have the value of the button below the circle ?

option n°1

instead of

o option n°1

Many thanks

                        <div id="row">
                            <apex:selectRadio rendered="{!qPreview.renderSelectRow}" value="{!qPreview.selectedOption}">
                                <apex:selectOptions value="{!qPreview.rowOptions}"/>
  • I'm sure it is possible, but the exact answer depends on the context, so pls add your vf page to the question. Apr 20, 2015 at 13:38
  • Hi guy ! I added the part of vfp Apr 20, 2015 at 14:05

2 Answers 2


Have you tried display:block?


<apex:page >
<style type="text/css">
#myRadio label { display:block; }
<div id="myRadio">
 <apex:form >
    <apex:selectRadio >
        <apex:selectOption itemValue="red" itemLabel="Red" id="redOption"/>
        <apex:selectOption itemValue="blue" itemLabel="Blue" id="blueOption"/>

upd it works for me with selectOptions from controller as well but is not very pretty: enter image description here Did you consider changing radio layout attribute to "pageDirection" instead?

  • Hi bananka ! It's works by adding display:block. Many thanks Apr 20, 2015 at 16:12

To do this, I think you need to let go of apex:selectOptions.

Check: http://www.eltoro.it/ArticleViewer?id=a07A000000NPRidIAH

In the second section of the above article, they create a custom radiobutton list with label behind it.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .