The hidden checkbox is not visible but still clickable and changes the
cursor. The z-index: -1 prevent this.
Also add comments to explain the reason for each declaration.
This change is a follow-up to
68527cf47935a0350d3f0a153bd06cbb98062ec8.
Change-Id: Ia66f4fb250d1685fe5bb0089b789b36d9916a5d5
/* This style adds a toggle button with internationalized message for the TOC. */
-/* When the browser supports :checked then overwrite the style="display:none" and make the /*
+/* When the browser supports :checked then overwrite the style="display:none" and make the */
/* checkbox invisible on another way to allow to focus the checkbox with keyboard. */
:not( :checked ) > .toctogglecheckbox {
+ // Make the checkbox visible to allow it to focus with keyboard.
display: inline !important; /* stylelint-disable-line declaration-no-important */
+ // Remove any size of the checkbox.
position: absolute;
+ // Make the checkbox invisible.
opacity: 0;
+ // Prevent that the checkbox is clickable and changes the cursor.
+ z-index: -1;
}
.toctogglespan {