Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Shahab KhanShahab Khan 

How to display radio buttons with image or text box

Hi,

Can some one help me how to display radio button with image as shown below.

User-added image

Thanks in advance.
rohitsfdcrohitsfdc
Hello Shahab,
You can do it using css and wraping radio button and image in Label tag. Please see example below

Wrap radio and image in <label>
Hide radio button
Target the image next to the hidden radio using Adjacent sibling selector +
<label>
  <input type="radio" name="fb" value="small" />
  <img src="fb1.jpg">
</label>
CSS:

label > input{ /* HIDE RADIO */
  visibility: hidden;
  position: absolute;
}
label > input + img{ /* IMAGE STYLES */
  cursor:pointer;
  border:2px solid transparent;
}
label > input:checked + img{ /* (RADIO CHECKED) IMAGE STYLES */
  border:2px solid #f00;
}
Shahab KhanShahab Khan
Hi Every one,

Thanks for your reply i am using Sales Force coding style for radio options like below.

<apex:selectRadio layout="pageDirection" value="{!payment_type}" id="rdPayment_Type__c" onclick="DisplayPayType(this.value);" styleClass="Payment_class" >
                        <apex:selectOption itemValue="Credit Card" itemLabel="Credit Card" />
                        <apex:selectOption itemValue="E-Check" itemLabel="E-Check: Will enclose check during event or will mail to 46903 Sugarland Road, Sterling, VA 20164" />
                    </apex:selectRadio>

In that case how can i show image next to Credit Card option?