function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
PSLAnjuPSLAnju 

How Apply Styles to <apex:selectOptions>

Hi all,

   

      I am using <apex: selectOptions> in <apex:selectRadio> for selecting values. How can apply styles for the options ? 

 

Thanks in Advance

 

Anju

WesNolte__cWesNolte__c

Hey

 

This is a bit tricky. I think SF renders the radio buttons in a table, is that right? So if you use this code:

 

<apex:selectRadio value="{!astuff}" styleClass="paymentOpt">

     <apex:selectOptions value="{!stuffs}" />

</apex:selectRadio> 

 

You end up with this:

 

<table class="paymentOpt">
  <tr>
 <td>
 

<input type="radio" name="" id="" value="Direct Debit" />

<label for=""> Direct Debit</label></td>

 <td>
 <input type="radio" name="" id="" value="Credit Card" /><label for=""> Credit/Debit Card</label></td>
  </tr>
 

</table>

 

 

Knowing this, we can use our badass CSS skeeeells to style it anyway we want e.g. including this in our page,

 

        .paymentOpt{

            margin: 0px auto;

            width: 80%;

        }

        

        .paymentOpt td{

            width: 45%;

        }

        

        .paymentOpt input, .paymentOpt label{

            float:none;

            display:inline;

            width: 30px;

        }

 

Will style the radio buttons accordingly.

 

Wes 
MikesForceMikesForce

Just adding my discovery;
    ...
    <td class="radioGroup">
        <apex:selectRadio value="{!someVariable}" styleClass="radioB">
                    <apex:selectOptions value="{!radioValues}"/> 
                </apex:selectRadio>
    </td>
    ...

1) The occasionally annoying border around the radiobuttons can be managed / reduced by applying styling to the
     'filedset' child of the containing element:

     .radioGroup fieldset {  margin:0px 0px; padding:0px 0px; border:none }

In this example, I have a set of radio buttons in one table cell <td class="radioGroup">
and I was annoyed by my table row expanding because of the padding or margin around the radiobuttons.
The above solution helped to reduce / manage the space around the buttons.


2) + can play with the background colour of the buttons themselves this way, for example
     .radioB td:nth-child(odd) { margin:0px 0px; padding:0px 2px; background:#EEE6AB; }
     .radioB td:nth-child(even) { margin:0px 0px; padding:0px 2px; background:#E8BF56; }

I did not play with the label yet (did not need it in the particular case).
I'd guess, but did not check, that selectCheckboxes behave the same way.
Terry LuschenTerry Luschen
I was able to piggyback on what Miklos had done...  I could set the label to white with the css below

<style> 
            .radioB td { margin:0px 0px; padding:0px 0px; background:rgb(79, 100, 186); color:white; }
             .radioB {background:rgb(79, 100, 186);border:none;margin-bottom: 0px;}
             .radioB label {color:white;}
        </style>

<apex:selectRadio value="{!dw.updateValue}" styleClass="radioB">
                                                <apex:selectOptions value="{!radioOptions}"/>
                                            </apex:selectRadio>