Styling Radio Buttons

  1. Vertical Styling
  2. Horizontal Styling

The default behavior with radio button lists is ugly, and I figured out mostly how to style them a coupla different ways. I'll used the blog tutorial example (but with my own posting modes):

The current look: ~~~ Post Mode: ( ) Unapproved (*) Deleted ( ) Approved ~~~ This looks terrible: we can fix it either vertically or horizontally.

Vertical Styling

The first task is to style the buttons vertically, and a bit more compact. This is done by wrapping the radio button control with a DIV and a new compactRadioGroup class:

// in protected/views/post/_form.php
    <div class="row">
        <?php echo $form->labelEx($post, 'postmode'); ?>
            <div class="compactRadioGroup">
                echo $form->radioButtonList($post, 'postmode',
                    array(  0 => 'Unapproved',
                            1 => 'Deleted',
                            2 => 'Approved' ) );
            <?php echo $form->error($post, 'postmode'); ?>

This wraps the buttons themselves in a separate DIV which allows us to style them separately, then we add the styling: ~~~ [css] / webroot/css/main.css / DIV#content DIV.compactRadioGroup {

padding-left: 1em;


DIV#content .compactRadioGroup LABEL, DIV#content .compactRadioGroup INPUT {

display: inline;

} ~~~ The padding-left is optional, but I think it adds a nice touch when styling vertically. Now the buttons look like: ~~~ Post Mode: ( ) Unapproved (*) Deleted ( ) Approved ~~~ Which is much cleaner.

Horizontal Styling

Putting the radio buttons in a horizontal row is like the above, but with two minor changes:

First, we have to to change the default separator of "<BR/>\n" that Yii automatically puts between each input item, and that's done in the radioButtonList with the htmloptions array:

                echo $form->radioButtonList($post, 'postmode',
                    array(  0 => 'Unapproved',
                            1 => 'Deleted',
                            2 => 'Approved' ),
                    array( 'separator' => " | " ) ); // choose your own separator text

The pipe character ( | ) shows between each option - choose this to taste.

Next, in a horizontal radio group the padding isn't really necessary, so delete this part from the main.css file: ~~~ [css] / remove me for horizontal / DIV#content DIV.compactRadioGroup {

padding-left: 1em;

} ~~~ Now the buttons look like: ~~~ Post Mode: ( ) Unapproved | (*) Deleted | ( ) Approved ~~~ If you want the label and the buttons on the same line, remove the newly-added DIV and attach the compactRadioGroup class to the row's DIV instead:

<div class="row compactRadioGroup">

This can surely be generalized with separate styles for vertical and horizontal radio groups, but that should be easy to figure out given this.

This has only been tested with the default theme.