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:

<style>

    .col

    {

        float:left;

    }

    .row

    {

        background-color:#222222;

    }


</style>

        <?php echo $form->radioButtonList(

                $envio,

                'operador',

                $arrayRadios,

                array( 'template'=>"

                    <div class='col'>

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

                   </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');


...


$this->render('create',array(

      'model'=>$model,

      'list'=>$list,

));

In view

$radioButtonList = explode('{custom}',

        $form->radioButtonList(

                $model,

                'option_id',

                $list,

                array(

                        'separator'=>'{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>';

        $i++;

}