Categories

Better Checkboxes (Now with radios!)

You are here:
< All Topics

Overview

This simple CSS insert adds a nice subtle UI tweak for your checkboxes. First, we’ll fade out unchecked boxes and labels to a softer color, helping to give them a “deactivated” appearance. Next, we highlight the checkbox color when hovering over an option. When a box is checked, we’ll change the label color back to normal giving it an “on” appearance. We’ll apply fade transitions using the @xf-baseAnimationSpeed value, then optionally set the pointer cursor and checked icon weight (outline vs solid).

better-checkboxes-sample.gif

** The checkboxes do change color on hover, though it is hard to see in this gif^

CSS snippet

Drop this into your extra.less template:
Less:

/* Better Checkboxes */

// Edit these values

@controlColor: @xf-textColorMuted;
@controlColor--hover: @xf-paletteColor3;

@controlLabelColor: @xf-textColorMuted;
@controlLabelColor--active: @xf-textColor;

@controlCheckedWeight: bold; // normal for outline, bold for solid
@cursor: pointer;

// From core_input.less
.formRow,
.inputGroup,
.inputChoices,
.block-footer,
.dataList-cell,
.message-cell--extra
{
    .iconic,
    &.dataList-cell--fa > a
    {
        > i
        {
            color: @controlColor;
        }

        &:hover > i
        {
            color: @controlColor--hover;
        }
    }
}

// Don't apply to off-canvas controls
.formRow .iconic > input[type=checkbox],
.formRow .iconic > input[type=radio] {

    + i:before,
    + i:after {
        transition: @xf-animationSpeed opacity;
    }
    + i:after {
        font-weight: @controlCheckedWeight;
    }
    ~ * {
        transition: @xf-animationSpeed color;
    }
    ~ span.iconic-label {
        color: @controlLabelColor;
    }
    &:checked ~ span.iconic-label {
        color: @controlLabelColor--active;
    }
    &:checked + i {
        color: @controlColor--hover;
    }
}

// Change the cursor
.formRow,
.inputGroup,
.inputChoices,
.block-footer,
.dataList-cell,
.message-cell--extra,
.structItem-extraInfo
{
    .iconic:hover {
        cursor: @cursor;
    }
}

Editing the values

You only need the edit the following lines if needed, but the default values should work great on their own:

Less:

@controlColor: @xf-textColorMuted;
@controlColor--hover: @xf-paletteColor3;

@controlLabelColor: @xf-textColorMuted;
@controlLabelColor--active: @xf-textColor;

@controlCheckedWeight: bold; // normal for outline, bold for solid
@cursor: pointer;

The @controlColors set the color of checkbox icons (note that @controlColor–hover is also used for the checked state). The @controlLabelColors affect the label text when a box is checked or unchecked. Finally, you can make checked boxes solid by using ‘bold’, and change the cursor pointer.

A few notes

While this is somewhat expanded to make beginner-friendly edits, you could optimize this with CSS knowledge. Further, since this is being dropped into extra.less, the @control variables don’t override those in core_input.less – so we need to duplicate some code from that template :whistle:. This could be avoided via an addon with Template Modifications. For the Less parent selector, we use the input[type=”checkbox] in order to declare easy sibling combinators.

Table of Contents