Styiling each RadioButton in RadioButtonList differently

Hello everybody,

How can I style each RadioButton element in a RadioButtonList differently?

What I would like to do:

element 1->display:block

element 2->display:none

element 3->display:none

element n->display:none




I think there are some CSS approaches to this by calling the elements, but they aren’t very reliable in some browsers.

This is my testing code now:











        <?php echo $form->radioButtonList(




                array( 'template'=>"

                    <div class='col'>

                        <div class='row'>{input}</div><div class='row'>{label}</div>




Thanks in advance!!

The values in my radio list came from another table in the database. I needed each radio button enclosed in a div but each div needed to have a different class based on the value of the radio button. I didn’t want to loose any of the functionality of activeRadioButtonList so this is what I did:

In controller

$model=new Model;

$list=CHtml::listData(Option::model()->findAll(), 'id', 'name');






In view

$radioButtonList = explode('{custom}',







                        'template'=>'{input}{label}', // this is the default, you don't have to declare it

                        'class'=>'radio', // this is the class for the radio button itself




$i= 0;

foreach ($list as $id => $value) {

        echo '<div class="radio_'.$id.'">' . $radioButtonList[$i] . '</div>';