I've been experimenting with creating a responsive CSS menu using the checkbox hack
Here's the HTML:
<input type="checkbox" id="button" />
<label for="button" onclick>click / touch</label>
<div>
Change my color!
</div>
And here's the CSS:
/* Advanced Checkbox Hack */
body { -webkit-animation: bugfix infinite 1s; }
@-webkit-keyframes bugfix { from {padding:0;} to {padding:0;} }
input[type=checkbox] {
position:absolute;
top:-9999px;
left:-9999px;
}
label {
cursor: pointer;
user-select: none;
}
div {
background-color: #00F;
}
/* checked */
input[type=checkbox]:checked ~ div {
background-color: #F00;
}
My setup worked well, passed valid html5 tests and was successfully tested on various desktop browsers. However, when testing on an Android 4.1.1 tablet, I encountered some issues where the menu wouldn't open. The problem wasn't with the pseudo-class :checked, but instead due to:
- The associated checkbox label not toggling the checkbox state upon tapping, and
- A JavaScript workaround failing to simulate the click due to the browser detecting it as two clicks.
For example, the following JS didn't work on Android:
$('label').click(function(e) {
e.preventDefault();
$("input#button").trigger('click');
});
An alternate approach setting the checkbox always to 'checked' also had limitations. Despite attempts with a timestamp-based workaround, I couldn't resolve the issue.
What perplexes me is that while the checkbox hack example functions on the tablet, my menu (unpublished) or even a simple form with checkboxes fail to change the checkbox upon label click.
If you have any insights on where I may have erred or possible solutions for enabling checkbox set/unset functionality on Android 4.1.1 without nesting within labels, please share. Even though my aim was a CSS-only solution, I'm open to a JS resolution. Thanks!