<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <h1>Custom Checkboxes</h1></br> <label class="customcheck">One <input type="checkbox" checked="checked"> <span class="checkmark"></span> </label> <label class="customcheck">Two <input type="checkbox"> <span class="checkmark"></span> </label> <label class="customcheck">Three <input type="checkbox"> <span class="checkmark"></span> </label> <label class="customcheck">Four <input type="checkbox"> <span class="checkmark"></span> </label> </div>

/* The customcheck */ .customcheck { display: block; position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; font-size: 22px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* Hide the browser's default checkbox */ .customcheck input { position: absolute; opacity: 0; cursor: pointer; } /* Create a custom checkbox */ .checkmark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #eee; border-radius: 5px; } /* On mouse-over, add a grey background color */ .customcheck:hover input ~ .checkmark { background-color: #ccc; } /* When the checkbox is checked, add a blue background */ .customcheck input:checked ~ .checkmark { background-color: #02cf32; border-radius: 5px; } /* Create the checkmark/indicator (hidden when not checked) */ .checkmark:after { content: ""; position: absolute; display: none; } /* Show the checkmark when checked */ .customcheck input:checked ~ .checkmark:after { display: block; } /* Style the checkmark/indicator */ .customcheck .checkmark:after { left: 9px; top: 5px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }