Close

Flat UI - Checkbox FIX

This is an example of a form with flat checkboxes designed with CSS and HTML. Checkboxes are given the input type of ‘checkbox' and their city names the type ‘label'. The body has been given the styles of font-family as "Open sans", "Segoe UI", "Segoe WP", Helvetica, Arial, sans-serif, color as #7F8C9A, and a background as #FCFDFD whereas the header 1 and header 2 have been given the styles of colors as #1ABC9C and #aaa, margin-bottom as 5px, font-weight as normal and text-align as center. The styles for the checkboxes are given by dividing them as ‘checked' and ‘not checked'. The styles for the left part of the button on unchecked event are set as width and height as 30px, transition as all .2s, border-radius as 6px 0 0 6px and background color as #7F8C9A whereas the right part is set as width as 80px, height as 30px, border-radius as 6px, transition as background-color .2s and background: #DDDDDD. On a checked event, the background will change to #34495E and #39D2B4 and the border-radius to 0 6px 6px 0. Source: https://codepen.io/ARS/pen/aeDHE

Post Comment or Questions

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Your email address will not be published.

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