On/Off Toggle Replacement for WordPress Checkboxes

πŸ‘‹ Ciprian on Monday, April 19, 2021 in Blog
Last modified on Monday, April 19, 2021

Learn JavaScript by example. Code snippets, how-to's and tutorials. Try now!

Toggleable Radio Buttons
Toggleable Radio Buttons

When it comes to WordPress settings and admin panels, I’ve always been a fan of minimalism and default/native styling. I never liked heavy control panels with unnecessary bells and whistles. Recently, though, for one of my clients, I wanted to beautify the control panel by adding toggles instead of checkboxes. They look better, more recognizable and there’s more contrast.

Experimenting with various methods, I decided to avoid modifying the HTML structure by adding unnecessary <span> or hidden <i> elements. I wanted a plug and play solution, a CSS class to do the job. I also wanted to avoid JavaScript.

Also, in the light of the recent WordPress design updates, I used the official blue for the active state.

Solution (CSS)

My solution is 1.19 KB (452 bytes Gzipped) and it uses :after and :before pseudo elements:

/**
 * Checkbox Toggle UI
 */
input[type="checkbox"].wppd-ui-toggle {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    -webkit-tap-highlight-color: transparent;

    width: auto;
    height: auto;
    vertical-align: middle;
    position: relative;
    border: 0;
    outline: 0;
    cursor: pointer;
    margin: 0 4px;
    background: none;
    box-shadow: none;
}
input[type="checkbox"].wppd-ui-toggle:focus {
    box-shadow: none;
}
input[type="checkbox"].wppd-ui-toggle:after {
    content: '';
    font-size: 8px;
    font-weight: 400;
    line-height: 18px;
    text-indent: -14px;
    color: #ffffff;
    width: 36px;
    height: 18px;
    display: inline-block;
    background-color: #a7aaad;
    border-radius: 72px;
    box-shadow: 0 0 12px rgb(0 0 0 / 15%) inset;
}
input[type="checkbox"].wppd-ui-toggle:before {
    content: '';
    width: 14px;
    height: 14px;
    display: block;
    position: absolute;
    top: 2px;
    left: 2px;
    margin: 0;
    border-radius: 50%;
    background-color: #ffffff;
}
input[type="checkbox"].wppd-ui-toggle:checked:before {
    left: 20px;
    margin: 0;
    background-color: #ffffff;
}
input[type="checkbox"].wppd-ui-toggle,
input[type="checkbox"].wppd-ui-toggle:before,
input[type="checkbox"].wppd-ui-toggle:after,
input[type="checkbox"].wppd-ui-toggle:checked:before,
input[type="checkbox"].wppd-ui-toggle:checked:after {
    transition: ease .15s;
}
input[type="checkbox"].wppd-ui-toggle:checked:after {
    content: 'ON';
    background-color: #2271b1;
}

If you need an international version, just remove the content: 'ON'; property, or replace it with another word or a tick symbol βœ“.

Solution (HTML)

The only change you need to make to your checkboxes is adding a class – class="wppd-ui-toggle" – make sure you replace the prefix or use something related to your plugin. See example below:

<input type="checkbox" class="wppd-ui-toggle" id="field-id" name="field_name" value="1" <?php echo ((int) get_option('field_name') === 1) ? 'checked' : ''; ?>>
<label for="field-id">Enable this option</label>

Notes

You are not restricted to use the official blue. You can replace the blue with any other official colour, or even a colour of your own, if you need to keep a specific colour pallete for branding purposes.

πŸ‘‹ Added by Ciprian on Monday, April 19, 2021 in Blog. Last modified on Monday, April 19, 2021.

Leave a Reply

You have to agree to the comment policy.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Privacy Policy