I made it work, as you see in this Fiddle.
The problem is that the checkbox is always over the spans. And because all the checkbox and the spans are positioned absolute, changing the z-index
wouldn't work! The only way I found it to work with only CSS (by not changing to much) is by messing with the pointer-events
property and the <div class="ao-annotations">
's z-index
. (z-index
is layered within an element. Because the annotations <div>
and the checkbox are both in <div class="ao-preview">
, changing the <span>
z-index
wouldn't work.
I did the following:
I set the z-index of the div.ao-annotations
higher than the input.ao-toggle
. This results to not being able to click on the input, so not being able to toggle.
To solve this I added pointer-events: none
to the <div class="ao-annotations">
. Now the result is the same, but the <span>
s are now positioned on top of the input.
To be able to click on the <span>
s I added this CSS:
input.ao-toggle:checked ~ .ao-annotations span{
pointer-events: auto;
}
This results to only being able to click on the <span>
s when the checkbox is checked.
Summary:
.ao-annotations {
z-index: 20;
pointer-events: none;
}
input.ao-toggle {
z-index: 10;
}
input.ao-toggle:checked ~ .ao-annotations span{
pointer-events: auto;
}
I am very sad to say this only works in IE11 (and all the other browsers)... So you'd probably have to 'hack' with Javascript or rebuild the HTML / CSS.
I hope you can build on this!