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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.