Form Checkboxes
Required:
HTML
CSS
JS
Demo
HTML
<form><label><span class="required">*</span> Checkbox & Radio</label><label class="checkbox-container">One<input type="checkbox" name="option[]" checked="checked"><span class="checkmark"></span></label><label class="checkbox-container">Two<input type="checkbox" name="option[]"><span class="checkmark"></span></label><label class="checkbox-container">Three<input type="checkbox" name="option[]"><span class="checkmark"></span></label><label class="checkbox-container">All<input type="radio" name="option[]"><span class="checkmark"></span></label></form>
CSS
.checkbox-container {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;}.checkbox-container input {position: absolute;opacity: 0;cursor: pointer;height: 0;width: 0;}.checkmark {position: absolute;top: 0;left: 0;height: 25px;width: 25px;background-color: #eee;}.checkbox-container:hover input ~ .checkmark {background-color: #ccc;}.checkbox-container input:checked ~ .checkmark {background-color: #2196F3;}.checkmark:after {content: "";position: absolute;display: none;}.checkbox-container input:checked ~ .checkmark:after {display: block;}.checkbox-container .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);}
Javascript
window.addEventListener('DOMContentLoaded', function() {$('input[name="option[]"]').on('change', function() {if ($(this).attr('type') == 'radio') {if ($(this).prop('checked')) {$('input[name="option[]"][type="checkbox"]').prop('checked', !1)}} else {if ($(this).prop('checked')) {$('input[name="option[]"][type="radio"]').prop('checked', !1)}}})})
Fatal error: Uncaught Error: Call to undefined function seo_url() in /home/sabalico/public_html/blueprint/pages/documentation.php:186Stack trace:#0 /home/sabalico/public_html/index.php(86): include()#1 {main} thrown in /home/sabalico/public_html/blueprint/pages/documentation.php on line 186