Styling Radio Buttons

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">
            <?php
                echo $form->radioButtonList($post, 'postmode',
                    array(  0 => 'Unapproved',
                            1 => 'Deleted',
                            2 => 'Approved' ) );
            ?>
            </div>
            <?php echo $form->error($post, 'postmode'); ?>
    </div>

This wraps the buttons themselves in a separate DIV which allows us to style them separately, then we add the styling:

/* 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:

/* 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">
 ...
</div>

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.