Toggle navigation
WebEdit
New page
Samples
Login
Copy of 'Copy of 'Inaccessible Custom Checkbox Widget''
Save
Show
Copy
Unsaved changes!
Settings
Hide
Title
Title
Description
Description
Web Key
Slug
Public
Last updated: April 29, 2024, 4:44 a.m.
HTML Head
HTML Body
<h1>Inaccessible Custom Checkbox Widget</h1> <fieldset> <legend> Pizza Toppings </legend> <label> <input type="checkbox"> Green pepper </label> <label> <input type="checkbox"> Onion </label> <div class="checkbox" onclick="clickCheckbox(event)"> <span></span> Mushrooms </div> <div class="checkbox" onclick="clickCheckbox(event)"> <span></span> Spinach </div> </fieldset>
CSS
fieldset { border-color: #EEE; width: 10em; } fieldset legend { font-size: 100%; } label, div.checkbox { padding: 2px; width: 10em; display: block; margin-top: 0.25em; margin-bottom: 0.25em; } label input { margin-right: 0.5em; } div.checkbox span { padding: 0.25em; } div.checkbox span:before { content: '✗'; color: red; padding-right: 0.125em; } div.checkbox.checked span:before { content: '✓'; color: green; padding-right: 0.190em; }
JavaScript
function toggleCheckbox(node) { if (node.classList.contains('checked')) { node.classList.remove('checked'); } else { node.classList.add('checked'); } } function clickCheckbox(event) { var cb = event.currentTarget; toggleCheckbox(cb); event.stopPropagation(); event.preventDefault(); }