"check"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/rkchauhan/pen/ONJEYL?depth=everything&limit=all&order=popularity&page=12&q=material+&show_forks=false" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="author" content="Ravikumar Chauhan"> <!-- Meta and Opengraph tags --> <meta name="description" content="Material Design Checkbox | by Ravikumar Chauhan"> <meta name="keywords" content="material design, checkbox, material checkbox, css3, html5"> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/icon?family=Material+Icons'><link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto:300'> <style class="cp-pen-styles">/* ----------------------------------------------------- Material Design Checkbox CodePen URL: https://codepen.io/rkchauhan/pen/ONJEYL By: Ravikumar Chauhan Find me on:- * Twitter: https://twitter.com/rkchauhan01 * Facebook: https://www.facebook.com/ravi032chauhan * GitHub: https://github.com/rkchauhan * CodePen: https://codepen.io/rkchauhan Thanks to:- * Google Material design - https://www.google.com/design/spec/material-design/introduction.html * Google Material Color - https://www.google.com/design/spec/style/color.html * Google Material Icons - https://design.google.com/icons/ * Roboto Font - https://google.com/fonts/specimen/Roboto * jQuery - https://jquery.com -------------------------------------------------------- */ /* ----------------------------------------------------- Body -------------------------------------------------------- */ body { margin: 0; padding: 0; color: #646360; font-size: 16px; font-family: 'Roboto', sans-serif; background-color: #fafafa; } *, *::after, *::before { -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } a { color: #03a9f4; outline: none; text-decoration: none; } a:hover { text-decoration: underline; } .color-box { position: fixed; top: 22%; right: 0px; width: 100px; padding: 20px 18px 14px 20px; background-color: #fff; border-radius: 2px 0 0 2px; box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.175); -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out; -webkit-transform: translate3d(102px, 0, 0); transform: translate3d(102px, 0, 0); z-index: 2; } .color-box.open { -webkit-transform: translate3d(0, 0, 0) !important; transform: translate3d(0, 0, 0) !important; } .color-box .show-box { position: absolute; left: -38px; top: 15px; width: 38px; height: 38px; display: block; background-color: #fff; border-radius: 2px 0 0 2px; box-shadow: -4px 2px 2px -2px rgba(0, 0, 0, 0.175); cursor: pointer; z-index: 1; } .color-box .show-box i { color: rgba(0, 0, 0, 0.575); font-size: 20px; line-height: 38px; margin-left: 8px; } .color-box p { margin: 0 0 8px 0; padding: 0; font-size: 11px; } .color-box .colors-list { margin: 0; padding: 0; } .color-box .colors-list li { float: left; display: block; margin-bottom: 2px; margin-right: 6px; } .color-box .colors-list li a { display: inline-block; width: 24px; height: 24px; border-radius: 2px; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; cursor: pointer; } .color-box .colors-list li a.teal { background-color: #009688; } .color-box .colors-list li a.lightBlue { background-color: #03a9f4; } .color-box .colors-list li a.green { background-color: #4caf50; } .color-box .colors-list li a.amber { background-color: #ffc107; } .color-box .colors-list li a.orange { background-color: #ff9800; } .color-box .colors-list li a.cyan { background-color: #00bcd4; } .color-box .colors-list li a.pink { background-color: #e91e63; } .color-box .colors-list li a.deepPurple { background-color: #673ab7; } .color-box .colors-list li a.indigo { background-color: #3f51b5; } .color-box .colors-list li a.red { background-color: #f44336; } .color-box .colors-list li a.yellow { background-color: #ffeb3b; } .color-box .colors-list li a.lime { background-color: #cddc39; } .color-box .colors-list li a.brown { background-color: #795548; } /* ----------------------------------------------------- Main -------------------------------------------------------- */ main { width: 100%; max-width: 940px; margin: 2rem auto; } main section { display: block; margin-bottom: 2rem; padding: 1rem; background-color: #eee; box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.157); } main section:last-child { margin-bottom: 0; } main section .heading { margin: 0; padding: 0; font-size: 1.2rem; } main section .wrap { overflow: hidden; display: block; margin: 0.4rem 0; text-align: center; } main section .wrap .holder { float: left; text-align: center; } main section .wrap .holder:last-child { margin-right: 0; } main section .wrap .holder.col-4 { width: 24.25%; } main section .wrap .holder.col-4:nth-child(n) { margin-right: 1%; margin-bottom: 1%; } main section .wrap .holder.col-4:nth-child(4n) { margin-right: 0; margin-bottom: 0; } main section .wrap .holder .demo { min-height: 100px; padding: 2em 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack: center; align-content: center; } main section .wrap .holder .captions { padding: 8px; color: rgba(0, 0, 0, 0.5); font-size: 13px; font-weight: bold; border-top: 1px solid rgba(0, 0, 0, 0.2); border-bottom: 1px solid rgba(0, 0, 0, 0.2); } @media only screen and (max-width: 768px) { main section .wrap .holder.col-4 { width: 32.66667%; } main section .wrap .holder.col-4:nth-child(n) { margin-right: 1%; margin-bottom: 1%; } main section .wrap .holder.col-4:nth-child(3n) { margin-right: 0; margin-bottom: 0; } } @media only screen and (max-width: 640px) { main section .wrap .holder { float: none; } main section .wrap .holder.col-4 { display: block; width: 100%; } main section .wrap .holder.col-4:nth-child(n) { margin: 0; margin-bottom: 14px; } } main section.bg-dark { background-color: #333; box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.257); } main section.bg-dark .heading { color: #7a7a7a; } main section.bg-dark .holder .captions { color: #7a7a7a; border-top: 1px solid rgba(255, 255, 255, 0.275); border-bottom: 1px solid rgba(255, 255, 255, 0.275); } main section.bg-light { background-color: #FFF; } @media only screen and (max-width: 960px) { main { padding: 0 1.5%; } } /* ----------------------------------------------------- Header -------------------------------------------------------- */ header { display: block; width: 100%; padding: 12px 0; text-align: center; background-color: #009688; box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.275); } header h2 { margin: 0; padding: 25px 0; color: #FFF; font-size: 2em; font-weight: 300; letter-spacing: 1px; } /* ----------------------------------------------------- Footer -------------------------------------------------------- */ footer { display: block; overflow: hidden; width: 100%; min-height: 80px; background-color: #dbdbdb; border-top: 1px solid #EEE; } footer .row { width: 100%; max-width: 860px; margin: 0 auto; } footer .footer-content { margin: 0 8px; padding: 25px 0 18px; text-align: center; } footer .footer-content span { color: rgba(0, 0, 0, 0.525); font-size: 0.857em; margin-right: 5px; } @media only screen and (max-width: 768px) { footer span { display: block; width: 100%; margin-bottom: 8px; } } /* ---------------------------------------------------------------------- Material Design Checkbox - by Ravikumar Chauhan ------------------------------------------------------------------------- */ .rkmd-checkbox { color: #818181; font-size: 15px; font-weight: bold; font-family: 'Roboto', sans-serif; letter-spacing: .5px; } .rkmd-checkbox .input-checkbox { position: relative; display: inline-block; width: 32px; height: 32px; text-align: center; vertical-align: -9px; } .rkmd-checkbox .input-checkbox input[type="checkbox"] { visibility: hidden; position: absolute; left: 7px; bottom: 7px; margin: 0; padding: 0; outline: none; cursor: pointer; opacity: 0; } .rkmd-checkbox .input-checkbox input[type="checkbox"] + .checkbox:before { position: absolute; left: 4px; bottom: 8px; width: 18px; height: 18px; font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; vertical-align: -6px; /* Support for all WebKit browsers. */ -webkit-font-smoothing: antialiased; /* Support for Safari and Chrome. */ text-rendering: optimizeLegibility; /* Support for Firefox. */ -moz-osx-font-smoothing: grayscale; /* Support for IE. */ -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga'; -webkit-transition: all .2s ease; transition: all .2s ease; z-index: 1; } .rkmd-checkbox .input-checkbox input[type="checkbox"] + .checkbox:before { content: "\e835"; color: #717171; } .rkmd-checkbox .input-checkbox input[type="checkbox"]:checked + .checkbox:before { content: "\e834"; } .rkmd-checkbox .input-checkbox input[type="checkbox"]:active:not(:disabled) + .checkbox:before { -webkit-transform: scale3d(0.88, 0.88, 1); transform: scale3d(0.88, 0.88, 1); } .rkmd-checkbox .input-checkbox input[type="checkbox"]:disabled + .checkbox:before { color: rgba(0, 0, 0, 0.157) !important; } .rkmd-checkbox.checkbox-light label, .rkmd-checkbox.checkbox-light .label { color: #FFF; } .rkmd-checkbox.checkbox-light input[type="checkbox"] + .checkbox:before { color: #FFF; } .rkmd-checkbox.checkbox-light input[type="checkbox"]:disabled + .checkbox:before { color: #5d5d5d !important; } .rkmd-checkbox.checkbox-light.checkbox-rotate input[type="checkbox"] + .checkbox:before { border-color: #FFF; } .rkmd-checkbox.checkbox-light.checkbox-rotate input[type="checkbox"]:disabled + .checkbox:before { border-color: #5d5d5d !important; } .rkmd-checkbox label, .rkmd-checkbox .label { cursor: pointer; } /* ---------------------------------------------------------------------- Rotate Checkbox - by Ravikumar Chauhan ------------------------------------------------------------------------- */ .rkmd-checkbox.checkbox-rotate .input-checkbox input[type="checkbox"] + .checkbox { cursor: pointer; } .rkmd-checkbox.checkbox-rotate .input-checkbox input[type="checkbox"] + .checkbox:before { content: ""; position: absolute; left: 7px; bottom: 7px; width: 18px; height: 18px; border: 2px solid #717171; border-radius: 2px; -webkit-transition: all .2s ease; transition: all .2s ease; z-index: 1; } .rkmd-checkbox.checkbox-rotate .input-checkbox input[type="checkbox"]:checked + .checkbox:before { left: 11px; width: 12px; height: 20px; border-width: 2px; border-style: solid; border-top: transparent; border-left: transparent; -webkit-transform: rotate(40deg); transform: rotate(40deg); border-radius: 1px; } .rkmd-checkbox.checkbox-rotate .input-checkbox input[type="checkbox"]:disabled + .checkbox:before { border-color: rgba(0, 0, 0, 0.157) !important; } /* ---------------------------------------------------------------------- Normal Checkbox Color - by Ravikumar Chauhan ------------------------------------------------------------------------- */ .rkmd-checkbox:not(.checkbox-rotate) .checkbox-teal input[type="checkbox"]:checked + .checkbox:before { color: #009688; } .rkmd-checkbox:not(.checkbox-rotate) .checkbox-lightBlue input[type="checkbox"]:checked + .checkbox:before { color: #03a9f4; } .rkmd-checkbox:not(.checkbox-rotate) .checkbox-green input[type="checkbox"]:checked + .checkbox:before { color: #4caf50; } .rkmd-checkbox:not(.checkbox-rotate) .checkbox-amber input[type="checkbox"]:checked + .checkbox:before { color: #ffc107; } .rkmd-checkbox:not(.checkbox-rotate) .checkbox-orange input[type="checkbox"]:checked + .checkbox:before { color: #ff9800; } .rkmd-checkbox:not(.checkbox-rotate) .checkbox-cyan input[type="checkbox"]:checked + .checkbox:before { color: #00bcd4; } .rkmd-checkbox:not(.checkbox-rotate) .checkbox-pink input[type="checkbox"]:checked + .checkbox:before { color: #e91e63; } .rkmd-checkbox:not(.checkbox-rotate) .checkbox-deepPurple input[type="checkbox"]:checked + .checkbox:before { color: #673ab7; } .rkmd-checkbox:not(.checkbox-rotate) .checkbox-indigo input[type="checkbox"]:checked + .checkbox:before { color: #3f51b5; } .rkmd-checkbox:not(.checkbox-rotate) .checkbox-red input[type="checkbox"]:checked + .checkbox:before { color: #f44336; } .rkmd-checkbox:not(.checkbox-rotate) .checkbox-yellow input[type="checkbox"]:checked + .checkbox:before { color: #ffeb3b; } .rkmd-checkbox:not(.checkbox-rotate) .checkbox-lime input[type="checkbox"]:checked + .checkbox:before { color: #cddc39; } .rkmd-checkbox:not(.checkbox-rotate) .checkbox-brown input[type="checkbox"]:checked + .checkbox:before { color: #795548; } /* ---------------------------------------------------------------------- Rotate Checkbox Color - by Ravikumar Chauhan ------------------------------------------------------------------------- */ .rkmd-checkbox.checkbox-rotate .checkbox-teal input[type="checkbox"]:checked + .checkbox:before { border-color: #009688; } .rkmd-checkbox.checkbox-rotate .checkbox-lightBlue input[type="checkbox"]:checked + .checkbox:before { border-color: #03a9f4; } .rkmd-checkbox.checkbox-rotate .checkbox-green input[type="checkbox"]:checked + .checkbox:before { border-color: #4caf50; } .rkmd-checkbox.checkbox-rotate .checkbox-amber input[type="checkbox"]:checked + .checkbox:before { border-color: #ffc107; } .rkmd-checkbox.checkbox-rotate .checkbox-orange input[type="checkbox"]:checked + .checkbox:before { border-color: #ff9800; } .rkmd-checkbox.checkbox-rotate .checkbox-cyan input[type="checkbox"]:checked + .checkbox:before { border-color: #00bcd4; } .rkmd-checkbox.checkbox-rotate .checkbox-pink input[type="checkbox"]:checked + .checkbox:before { border-color: #e91e63; } .rkmd-checkbox.checkbox-rotate .checkbox-deepPurple input[type="checkbox"]:checked + .checkbox:before { border-color: #673ab7; } .rkmd-checkbox.checkbox-rotate .checkbox-indigo input[type="checkbox"]:checked + .checkbox:before { border-color: #3f51b5; } .rkmd-checkbox.checkbox-rotate .checkbox-red input[type="checkbox"]:checked + .checkbox:before { border-color: #f44336; } .rkmd-checkbox.checkbox-rotate .checkbox-yellow input[type="checkbox"]:checked + .checkbox:before { border-color: #ffeb3b; } .rkmd-checkbox.checkbox-rotate .checkbox-lime input[type="checkbox"]:checked + .checkbox:before { border-color: #cddc39; } .rkmd-checkbox.checkbox-rotate .checkbox-brown input[type="checkbox"]:checked + .checkbox:before { border-color: #795548; } /* ---------------------------------------------------------------------- Checkbox Ripple Effect - by Ravikumar Chauhan ------------------------------------------------------------------------- */ .rkmd-checkbox.checkbox-ripple .ripple { position: absolute; top: 0px; left: 0px; width: 32px; height: 32px; border-radius: 50%; -webkit-transform: scale(0); transform: scale(0); } .rkmd-checkbox.checkbox-ripple .ripple.animated { display: block; -webkit-animation-name: checkbox-ripple; animation-name: checkbox-ripple; -webkit-animation-duration: 400ms; animation-duration: 400ms; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes checkbox-ripple { 100% { opacity: 0; -webkit-transform: scale(1.6); transform: scale(1.6); } } @keyframes checkbox-ripple { 100% { opacity: 0; -webkit-transform: scale(1.6); transform: scale(1.6); } } /* ---------------------------------------------------------------------- Checkbox Ripple Effect Color - by Ravikumar Chauhan ------------------------------------------------------------------------- */ .rkmd-checkbox .checkbox-teal .ripple { background-color: #009688 !important; } .rkmd-checkbox .checkbox-lightBlue .ripple { background-color: #03a9f4 !important; } .rkmd-checkbox .checkbox-green .ripple { background-color: #4caf50 !important; } .rkmd-checkbox .checkbox-amber .ripple { background-color: #ffc107 !important; } .rkmd-checkbox .checkbox-orange .ripple { background-color: #ff9800 !important; } .rkmd-checkbox .checkbox-cyan .ripple { background-color: #00bcd4 !important; } .rkmd-checkbox .checkbox-pink .ripple { background-color: #e91e63 !important; } .rkmd-checkbox .checkbox-deepPurple .ripple { background-color: #673ab7 !important; } .rkmd-checkbox .checkbox-indigo .ripple { background-color: #3f51b5 !important; } .rkmd-checkbox .checkbox-red .ripple { background-color: #f44336 !important; } .rkmd-checkbox .checkbox-yellow .ripple { background-color: #ffeb3b !important; } .rkmd-checkbox .checkbox-lime .ripple { background-color: #cddc39 !important; } .rkmd-checkbox .checkbox-brown .ripple { background-color: #795548 !important; } </style></head><body> <!-- header --> <header> <h2>Material Design Checkbox</h2> </header><!-- @end header --> <!-- Main content --> <main role="main" data-checkbox-color="checkbox-lightBlue"> <section> <h3 class="heading">Light</h3> <div class="wrap"> <div class="holder col-4"> <div class="demo"> <!-- Checkbox-1 --> <div class="rkmd-checkbox checkbox-ripple"> <label class="input-checkbox checkbox-lightBlue"> <input type="checkbox" id="checkbox-1" checked> <span class="checkbox"></span> </label> <label for="checkbox-1" class="label">Checkbox</label> </div><!-- @end Checkbox-1 --> </div> <div class="captions">Normal</div> </div> <div class="holder col-4"> <div class="demo"> <!-- Checkbox-2 --> <div class="rkmd-checkbox checkbox-rotate checkbox-ripple"> <label class="input-checkbox checkbox-lightBlue"> <input type="checkbox" id="checkbox-2" checked> <span class="checkbox"></span> </label> <label for="checkbox-2" class="label">Checkbox</label> </div><!-- @end Checkbox-2 --> </div> <div class="captions">Rotate</div> </div> <div class="holder col-4"> <div class="demo"> <!-- Checkbox-3 --> <div class="rkmd-checkbox checkbox-ripple"> <label class="input-checkbox checkbox-lightBlue"> <input type="checkbox" id="checkbox-3" disabled> <span class="checkbox"></span> </label> <label for="checkbox-3" class="label">Checkbox</label> </div><!-- @end Checkbox-3 --> </div> <div class="captions">Disabled</div> </div> <div class="holder col-4"> <div class="demo"> <!-- Checkbox-4 --> <div class="rkmd-checkbox"> <label class="input-checkbox checkbox-lightBlue"> <input type="checkbox" id="checkbox-4" checked disabled> <span class="checkbox"></span> </label> <label for="checkbox-4" class="label">Checkbox</label> </div><!-- @end Checkbox-4 --> </div> <div class="captions">On & Disabled</div> </div> </div> </section> <section class="bg-dark"> <h3 class="heading">Dark</h3> <div class="wrap"> <div class="holder col-4"> <div class="demo"> <!-- Checkbox-5 --> <div class="rkmd-checkbox checkbox-ripple checkbox-light"> <label class="input-checkbox checkbox-lightBlue"> <input type="checkbox" id="checkbox-5" checked> <span class="checkbox"></span> </label> <label for="checkbox-5" class="label">Checkbox</label> </div><!-- @end Checkbox-5 --> </div> <div class="captions">Normal</div> </div> <div class="holder col-4"> <div class="demo"> <!-- Checkbox-6 --> <div class="rkmd-checkbox checkbox-ripple checkbox-rotate checkbox-light"> <label class="input-checkbox checkbox-lightBlue"> <input type="checkbox" id="checkbox-6" checked> <span class="checkbox"></span> </label> <label for="checkbox-6" class="label">Checkbox</label> </div><!-- @end Checkbox-6 --> </div> <div class="captions">Rotate</div> </div> <div class="holder col-4"> <div class="demo"> <!-- Checkbox-7 --> <div class="rkmd-checkbox checkbox-ripple checkbox-light"> <label class="input-checkbox checkbox-lightBlue"> <input type="checkbox" id="checkbox-7" disabled> <span class="checkbox"></span> </label> <label for="checkbox-7" class="label">Checkbox</label> </div><!-- @end Checkbox-7 --> </div> <div class="captions">Disabled</div> </div> <div class="holder col-4"> <div class="demo"> <!-- Checkbox-8 --> <div class="rkmd-checkbox checkbox-light"> <label class="input-checkbox checkbox-lightBlue"> <input type="checkbox" id="checkbox-8" checked disabled> <span class="checkbox"></span> </label> <label for="checkbox-8" class="label">Checkbox</label> </div><!-- @end Checkbox-8 --> </div> <div class="captions">On & Disabled</div> </div> </div> </section> </main><!-- @end main --> <!-- Footer --> <footer> <div class="row"> <div class="footer-content"> <span><strong>Made in India</strong>,</span> <span>by <a href="https://twitter.com/rkchauhan01" target="_blank">Ravikumar Chauhan</a>.</span> <span><a href="https://github.com/rkchauhan" target="_blank">GitHub</a></span> <span><a href="https://codepen.io/rkchauhan" target="_blank">CodePen</a></span> </div> </div> </footer><!-- @end footer --> <!-- Color box --> <div class="color-box"> <a class="show-box"><i title="Select color" class="material-icons">invert_colors</i></a> <p>Colors:</p> <ul class="colors-list"> <li><a title="Teal" class="teal" data-checkbox-color="teal" onclick="return false;"></a></li> <li><a title="Light Blue" class="lightBlue" data-checkbox-color="lightBlue" onclick="return false;"></a></li> <li><a title="Green" class="green" data-checkbox-color="green" onclick="return false;"></a></li> <li><a title="Amber" class="amber" data-checkbox-color="amber" onclick="return false;"></a></li> <li><a title="Orange" class="orange" data-checkbox-color="orange" onclick="return false;"></a></li> <li><a title="Cyan" class="cyan" data-checkbox-color="cyan" onclick="return false;"></a></li> <li><a title="Pink" class="pink" data-checkbox-color="pink" onclick="return false;"></a></li> <li><a title="Deep Purple" class="deepPurple" data-checkbox-color="deepPurple" onclick="return false;"></a></li> <li><a title="Indigo" class="indigo" data-checkbox-color="indigo" onclick="return false;"></a></li> <li><a title="Red" class="red" data-checkbox-color="red" onclick="return false;"></a></li> <li><a title="Yellow" class="yellow" data-checkbox-color="yellow" onclick="return false;"></a></li> <li><a title="Lime" class="lime" data-checkbox-color="lime" onclick="return false;"></a></li> <li><a title="Brown" class="brown" data-checkbox-color="brown" onclick="return false;"></a></li> </ul> </div><!-- @end Color box --> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script >/* ----------------------------------------------------- Material Design Checkbox CodePen URL: https://codepen.io/rkchauhan/pen/ONJEYL By: Ravikumar Chauhan Find me on:- * Twitter: https://twitter.com/rkchauhan01 * Facebook: https://www.facebook.com/ravi032chauhan * GitHub: https://github.com/rkchauhan * CodePen: https://codepen.io/rkchauhan Thanks to:- * Google Material design - https://www.google.com/design/spec/material-design/introduction.html * Google Material Color - https://www.google.com/design/spec/style/color.html * Google Material Icons - https://design.google.com/icons/ * Roboto Font - https://google.com/fonts/specimen/Roboto * jQuery - https://jquery.com -------------------------------------------------------- */ $(document).ready(function() { $('.checkbox-ripple').rkmd_checkboxRipple(); change_checkbox_color(); }); (function($) { $.fn.rkmd_checkboxRipple = function() { var self, checkbox, ripple, size, rippleX, rippleY, eWidth, eHeight; self = this; checkbox = self.find('.input-checkbox'); checkbox.on('mousedown', function(e) { if(e.button === 2) { return false; } if($(this).find('.ripple').length === 0) { $(this).append('<span class="ripple"></span>'); } ripple = $(this).find('.ripple'); eWidth = $(this).outerWidth(); eHeight = $(this).outerHeight(); size = Math.max(eWidth, eHeight); ripple.css({'width': size, 'height': size}); ripple.addClass('animated'); $(this).on('mouseup', function() { setTimeout(function () { ripple.removeClass('animated'); }, 200); }); }); } }(jQuery)); function change_checkbox_color() { $('.color-box .show-box').on('click', function() { $(".color-box").toggleClass("open"); }); $('.colors-list a').on('click', function() { var curr_color = $('main').data('checkbox-color'); var color = $(this).data('checkbox-color'); var new_colot = 'checkbox-' + color; $('.rkmd-checkbox .input-checkbox').each(function(i, v) { var findColor = $(this).hasClass(curr_color); if(findColor) { $(this).removeClass(curr_color); $(this).addClass(new_colot); } $('main').data('checkbox-color', new_colot); }); }); } //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: