1 minute

The current version ZURB’s Foundation (A CSS framework) doesn’t style form checkboxes and the final look is always the browser default, which can look good or bad depending on your OS.

I like to have a more consistent look on my apps, especially on those that use checkboxes for selecting which items from a table to apply certain action to.

I use the following SCSS to style checkbox input elements. The original code was based from the look of checkboxes in Gmail although it was slightly more rounded. I’ve adapted it so that it fits better in Foundation (square corners), plus it will also use your $primary-color when it is highlighted:

The final result should look something like this:

foundation checkbox
Copyright © 2015-2021 - Eduardo Trujillo
Except where otherwise noted, content on this site is licensed under a Attribution-NonCommercial-ShareAlike 4.0 International (CC BY-NC-SA 4.0) license.
Site generated using Gatsby.