For a really easy way, use the following code, it will change the size of a small black outline check box, to a nice large one, better to click and larger for poorly sighted users. It will create a large tick.
|
1 2 3 4 5 6 7 8 |
<input type="mycheckbox" class="icondel"> .mycheckbox { transform: scale(1.6, 1.6) margin: 15px !important; } |
There is another way to write that code but its longer!!!! Way longer…but theres other bits that help!
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<input type="checkbox" id="checkbox-1-1" class="regular-checkbox" /><label for="checkbox-1-1"></label> <style> .regular-checkbox { display: none; } .regular-checkbox + label { border: 2px solid #8BC53F; padding: 10px; border-radius: 5px; display: inline-block; position: relative; } .regular-checkbox:checked + label { border: 2px solid #8BC53F; } .regular-checkbox:checked + label:after { content: '\2714'; font-size: 20px; position: absolute; top: -5px; left: 2px; } </style> |
