Wednesday, March 16, 2011

How to override Yii's block radio button list labels and make them inline

By default, Yii radio buttons, radiobuttonlists, and checkboxlists look dumb. The label is on a different line, which is not a great design.

Here's how to fix it:

In your form style sheet (form.css), set:

input[type=radio] + label, input[type=checkbox] + label { display:inline !important; }

that's it, you're done.

What it does is says anytime you have a radio button with a label element directly after it, make that label inline instead of block, meaning that there won't be a line break.

I would also recommend changing Yii's default checkbox label positioning to before the label. 


  1. Is it possible to make the checkboxes listed in multiple columns? For example, 3 columns per row, so if I have a very long checkbox list, it won't result in a very long page.

  2. There is a new css3 property to do this . Check out the spec. Otherwise I believe there is also a jquery plugin

  3. Is possible to use custom images instead of radio buttons?

  4. uhm?!? why overwriting the default form.css?

    radioButtonList( $model, 'attribute', dataArray, array(
    'separator' => '', // overwriting the line break
    'template' => '{input} {label}', // put the label behind
    'class' => 'classname', // additional css class

    in css you can set all styles needed (float, width, padding) for multiple columns. you may also be able to set icons as background images

  5. good job.........