New CSS Checkboxes & Radio Buttons with Code

In this current post, you will find the most popular and best CSS Checkbox and Radio Button code. There are plenty of collection are available for you to style up you checkbox fields in your website.

Take a look to use any of them for your projects, where each is available with HTML and CSS code. All are developed with pure CSS that will give you smooth movement while using it.

List of Best Checkboxes & Radio Buttons using CSS

CSS3 Checkbox Styles

This style is coded by Brad Bodine.

Tutorial           Live Demo

[codepen_embed height=”400″ theme_id=”0″ slug_hash=”novBm” default_tab=”result” user=”bbodine1″]See the Pen <a href=’https://codepen.io/bbodine1/pen/novBm/’>CSS3 Checkbox Styles</a> by Brad Bodine (<a href=’https://codepen.io/bbodine1′>@bbodine1</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

This one was created by Mahmoud Elmahdi.

Tutorial           Live Demo

[codepen_embed height=”400″ theme_id=”0″ slug_hash=”hlmri” default_tab=”result” user=”elmahdim”]See the Pen <a href=’https://codepen.io/elmahdim/pen/hlmri/’>Dropdown with Multiple checkbox select with jQuery</a> by Mahmoud Elmahdi (<a href=’https://codepen.io/elmahdim’>@elmahdim</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

Custom Checkboxes with CSS only

It is actually developed by Geoffrey Crofte.

Tutorial           Live Demo

[codepen_embed height=”400″ theme_id=”0″ slug_hash=”BiHzp” default_tab=”result” user=”CreativeJuiz”]See the Pen <a href=’https://codepen.io/CreativeJuiz/pen/BiHzp/’>Custom checkboxes with CSS only</a> by Geoffrey Crofte (<a href=’https://codepen.io/CreativeJuiz’>@CreativeJuiz</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

Simple CSS Checkboxes with Font Awesome

The below code by James Barnett.

Tutorial           Live Demo

[codepen_embed height=”400″ theme_id=”0″ slug_hash=”yILjk” default_tab=”result” user=”jamesbarnett”]See the Pen <a href=’https://codepen.io/jamesbarnett/pen/yILjk/’>Simple CSS Checkboxes with Font Awesome</a> by James Barnett (<a href=’https://codepen.io/jamesbarnett’>@jamesbarnett</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

Custom Checkboxes & Radio Buttons with Select Boxes

This CSS select box is developed by Kenan Yusuf.

Tutorial           Live Demo

[codepen_embed height=”400″ theme_id=”0″ slug_hash=”PZKEKd” default_tab=”result” user=”KenanYusuf”]See the Pen <a href=’https://codepen.io/KenanYusuf/pen/PZKEKd/’>Completely CSS: Custom checkboxes, radio buttons and select boxes</a> by Kenan Yusuf (<a href=’https://codepen.io/KenanYusuf’>@KenanYusuf</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

Touch Friendly Bootstrap Radio Buttons & Checkboxes

This pen by Brian Sassaman.

Tutorial           Live Demo

[codepen_embed height=”400″ theme_id=”0″ slug_hash=”iLrpC” default_tab=”result” user=”BrianSassaman”]See the Pen <a href=’https://codepen.io/BrianSassaman/pen/iLrpC/’>Touch Friendly Bootstrap Radio buttons and Checkboxes</a> by Brian Sassaman (<a href=’https://codepen.io/BrianSassaman’>@BrianSassaman</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

Pure CSS Custom Checkboxes

It is another pencode created by Glen Cheney.

Tutorial           Live Demo

[codepen_embed height=”400″ theme_id=”0″ slug_hash=”dABHx” default_tab=”result” user=”Vestride”]See the Pen <a href=’https://codepen.io/Vestride/pen/dABHx/’>Pure CSS custom checkboxes</a> by Glen Cheney (<a href=’https://codepen.io/Vestride’>@Vestride</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

Google Material Style Checkbox

This one owned by Sam.

Tutorial           Live Demo

[codepen_embed height=”400″ theme_id=”0″ slug_hash=”zDLxe” default_tab=”result” user=”Sambego”]See the Pen <a href=’https://codepen.io/Sambego/pen/zDLxe/’>Google material style checkbox (css only)</a> by Sam (<a href=’https://codepen.io/Sambego’>@Sambego</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

Delightful Checkbox Animation

This pen was created by Dylan Raga.

Tutorial           Live Demo

[codepen_embed height=”400″ theme_id=”0″ slug_hash=”Qwqbab” default_tab=”result” user=”dylanraga”]See the Pen <a href=’https://codepen.io/dylanraga/pen/Qwqbab/’>[Pure CSS] Delightful Checkbox Animation</a> by Dylan Raga (<a href=’https://codepen.io/dylanraga’>@dylanraga</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

Angular JS Checkboxes Bound to Target Array with Initial Selections Checked

This pen coded by Paul B. Hartzog.

Tutorial           Live Demo

[codepen_embed height=”400″ theme_id=”0″ slug_hash=”sluAF” default_tab=”result” user=”paulbhartzog”]See the Pen <a href=’https://codepen.io/paulbhartzog/pen/sluAF/’>AngularJS Checkboxes Bound to Target Array with Initial Selections Checked</a> by Paul B. Hartzog (<a href=’https://codepen.io/paulbhartzog’>@paulbhartzog</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

Animated CSS3 Checkbox

This one is designed by Jimmy Gillam.

Tutorial           Live Demo

[codepen_embed height=”400″ theme_id=”0″ slug_hash=”cwHyK” default_tab=”result” user=”theigmo87″]See the Pen <a href=’https://codepen.io/theigmo87/pen/cwHyK/’>Animated CSS3 Checkbox</a> by Jimmy Gillam (<a href=’https://codepen.io/theigmo87′>@theigmo87</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

CSS Radio Buttons & Checkboxes

The below checkbox code by Karen Menezes.

Tutorial           Live Demo

[codepen_embed height=”400″ theme_id=”0″ slug_hash=”wyxuB” default_tab=”result” user=”imohkay”]See the Pen <a href=’https://codepen.io/imohkay/pen/wyxuB/’>CSS Radio Buttons and Checkboxes: Custom icon</a> by Karen Menezes (<a href=’https://codepen.io/imohkay’>@imohkay</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

Custom Round Checkbox

It is a pen by Matt Smith.

Tutorial           Live Demo

[codepen_embed height=”400″ theme_id=”0″ slug_hash=”WjZVjo” default_tab=”result” user=”AllThingsSmitty”]See the Pen <a href=’https://codepen.io/AllThingsSmitty/pen/WjZVjo/’>Custom Round Checkbox</a> by Matt Smith (<a href=’https://codepen.io/AllThingsSmitty’>@AllThingsSmitty</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

Pure CSS3 Star Wars Lightsaber Checkboxes

It is actually owned by Nicholas Cerminara.

Tutorial           Live Demo

[codepen_embed height=”400″ theme_id=”0″ slug_hash=”KzurJ” default_tab=”result” user=”ncerminara”]See the Pen <a href=’https://codepen.io/ncerminara/pen/KzurJ/’>Pure CSS3 Star Wars Lightsaber Checkboxes</a> by Nicholas Cerminara (<a href=’https://codepen.io/ncerminara’>@ncerminara</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

Custom Checkboxes & Radio Buttons

This one by Sam.

Tutorial           Live Demo

[codepen_embed height=”400″ theme_id=”0″ slug_hash=”yiruz” default_tab=”result” user=”Sambego”]See the Pen <a href=’https://codepen.io/Sambego/pen/yiruz/’>Custom checkboxes / radio buttons #1</a> by Sam (<a href=’https://codepen.io/Sambego’>@Sambego</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

Count Checked Checkboxes with jQuery

It is developed by Emil Devantie Brockdorff.

Tutorial           Live Demo

[codepen_embed height=”400″ theme_id=”0″ slug_hash=”aitHh” default_tab=”result” user=”Mestika”]See the Pen <a href=’https://codepen.io/Mestika/pen/aitHh/’>Count checked checkboxes with jQuery</a> by Emil Devantie Brockdorff (<a href=’https://codepen.io/Mestika’>@Mestika</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

Material Design Checkbox CSS only

It was entirely designed by Hannes Kamecke.

Tutorial           Live Demo

[codepen_embed height=”400″ theme_id=”0″ slug_hash=”qaGrQL” default_tab=”result” user=”hansmaad”]See the Pen <a href=’https://codepen.io/hansmaad/pen/qaGrQL/’>Material Design Checkbox CSS only  </a> by Hannes Kamecke (<a href=’https://codepen.io/hansmaad’>@hansmaad</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

Wobble Checkboxes

The below one coded by Tamino Martinius.

Tutorial           Live Demo

[codepen_embed height=”400″ theme_id=”0″ slug_hash=”zjarZO” default_tab=”result” user=”Zaku”]See the Pen <a href=’https://codepen.io/Zaku/pen/zjarZO/’>Wobble Checkboxes</a> by Tamino Martinius (<a href=’https://codepen.io/Zaku’>@Zaku</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

CSS Radio Buttons & Checkboxes with Border

It is an amazing one developed by Karen Menezes.

Tutorial           Live Demo

[codepen_embed height=”400″ theme_id=”0″ slug_hash=”bCpxm” default_tab=”result” user=”imohkay”]See the Pen <a href=’https://codepen.io/imohkay/pen/bCpxm/’>CSS Radio Buttons and Checkboxes: Border</a> by Karen Menezes (<a href=’https://codepen.io/imohkay’>@imohkay</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

Happy Little Checkbox

The below code example by Branko Stancevic.

Tutorial           Live Demo

[codepen_embed height=”400″ theme_id=”0″ slug_hash=”pRQPNX” default_tab=”result” user=”landb”]See the Pen <a href=’https://codepen.io/landb/pen/pRQPNX/’>Happy little checkboxes (updated)</a> by Branko Stancevic (<a href=’https://codepen.io/landb’>@landb</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

Styling Checkboxes and Radio Buttons with CSS

This pen developed by 8bit Code.

Tutorial           Live Demo

[codepen_embed height=”400″ theme_id=”0″ slug_hash=”vEXaww” default_tab=”result” user=”8bitcode”]See the Pen <a href=’https://codepen.io/8bitcode/pen/vEXaww/’>Styling checkboxes and radio buttons with CSS</a> by 8bit code (<a href=’https://codepen.io/8bitcode’>@8bitcode</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

Accessible & Skeuomorphic Checkbox & Radio Button

This code was created by Simon Goellner.

Tutorial           Live Demo

[codepen_embed height=”400″ theme_id=”0″ slug_hash=”lthIG” default_tab=”result” user=”simeydotme”]See the Pen <a href=’https://codepen.io/simeydotme/pen/lthIG/’>Accessible & Skeuomorphic Checkbox/Radio jQuery plugin</a> by Simon Goellner (<a href=’https://codepen.io/simeydotme’>@simeydotme</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

Simple Radio Button & Checkbox

This code developed by Mahnoud Elmahdi.

Tutorial           Live Demo

[codepen_embed height=”400″ theme_id=”0″ slug_hash=”JFejy” default_tab=”result” user=”elmahdim”]See the Pen <a href=’https://codepen.io/elmahdim/pen/JFejy/’>Custom checkbox and radio button</a> by Mahmoud Elmahdi (<a href=’https://codepen.io/elmahdim’>@elmahdim</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

Angular UI Multiselect Checkbox Dropdown

This pen by Stephen Long.

Tutorial           Live Demo

[codepen_embed height=”400″ theme_id=”0″ slug_hash=”PqLRyZ” default_tab=”result” user=”long2know”]See the Pen <a href=’https://codepen.io/long2know/pen/PqLRyZ/’>Angular-UI Multiselect Checkbox Dropdown</a> by Stephen Long (<a href=’https://codepen.io/long2know’>@long2know</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

AngularJS Checkbox vs. Radio Buttons for boolean data

This pen coded by Paul B. Hartzog.

Tutorial           Live Demo

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”kBhzn” default_tab=”html,result” user=”paulbhartzog”]See the Pen <a href=’https://codepen.io/paulbhartzog/pen/kBhzn/’>AngularJS Checkbox vs. Radio Buttons for boolean data</a> by Paul B. Hartzog (<a href=’https://codepen.io/paulbhartzog’>@paulbhartzog</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

Checkbox Trickery: To-Do List

The below example is created by Will Boyd.

Tutorial           Live Demo

[codepen_embed height=”400″ theme_id=”0″ slug_hash=”xGLLwX” default_tab=”result” user=”lonekorean”]See the Pen <a href=’https://codepen.io/lonekorean/pen/xGLLwX/’>Checkbox Trickery: To-Do List</a> by Will Boyd (<a href=’https://codepen.io/lonekorean’>@lonekorean</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

Pure CSS Fancy Checkbox/Radio

It was coded by Rau.

Tutorial           Live Demo

[codepen_embed height=”400″ theme_id=”0″ slug_hash=”ONzBxP” default_tab=”result” user=”raubaca”]See the Pen <a href=’https://codepen.io/raubaca/pen/ONzBxP/’>Pure CSS Fancy Checkbox/Radio</a> by Rau (<a href=’https://codepen.io/raubaca’>@raubaca</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]