Toggle navigation
WebEdit
New page
Samples
Login
Copy of 'Part 3: Custom Checkbox Widget with focus and hover styling'
Save
Show
Copy
Unsaved changes!
Settings
Hide
Title
Title
Description
Description
Web Key
Slug
Public
Last updated: April 25, 2024, 12:44 a.m.
HTML Head
HTML Body
<h1>Part 3: Custom Checkbox Widget with focus and hover styling</h1> <fieldset> <legend> Pizza Toppings </legend> <label> <input type="checkbox" onfocus="checkboxFocus(event)" onblur="checkboxBlur(event)"/> Green pepper </label> <label> <input type="checkbox" onfocus="checkboxFocus(event)" onblur="checkboxBlur(event)"/> Onion </label> <div class="checkbox" role="checkbox" aria-checked="false" tabindex="0" onclick="clickCheckbox(event)" onkeydown="keydownCheckbox(event)"> <span aria-hidden="true"></span> Mushrooms </div> <div class="checkbox" role="checkbox" aria-checked="false" tabindex="0" onclick="clickCheckbox(event)" onkeydown="keydownCheckbox(event)"> <span aria-hidden="true"></span> Spinach </div> </fieldset>
CSS
fieldset { border-color: #EEE; width: 10em; } fieldset legend { font-size: 100%; } label, div.checkbox { padding: 4px; 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; } label.focus, div.checkbox:focus { padding: 2px; border: 2px solid #999; background-color: #DDE; } label:hover, div.checkbox:hover { background-color: #CCD; }
JavaScript
function toggleCheckbox(node) { if (node.classList.contains('checked')) { node.classList.remove('checked'); node.setAttribute('aria-checked', 'false'); } else { node.classList.add('checked'); node.setAttribute('aria-checked', 'true'); } } function clickCheckbox(event) { var cb = event.currentTarget; toggleCheckbox(cb); event.stopPropagation(); event.preventDefault(); } function keydownCheckbox(event) { var cb = event.currentTarget; if (event.key === ' ') { toggleCheckbox(cb); event.stopPropagation(); event.preventDefault(); } } function checkboxFocus(event) { event.currentTarget.parentElement.classList.add('focus'); } function checkboxBlur(event) { event.currentTarget.parentElement.classList.remove('focus'); }