Properly hide checkbox and radio inputs in button groups

`pointer-events: none;` for modern browsers (including IE11+), `clip: rect(1px, 1px, 1px, 1px);` for everything else.

Fixes #14137

1 files changed, 8 insertions, 5 deletions

diff --git a/less/button-groups.less b/less/button-groups.less
index c2e2260f06..6092afcd6e 100644
--- a/less/button-groups.less
+++ b/less/button-groups.less
@@ -226,11 +226,14 @@
 // Checkbox and radio options
 //
 // In order to support the browser's form validation feedback, powered by the
-// `required` attribute, we have to "hide" the inputs via `opacity`. We cannot
-// use `display: none;` or `visibility: hidden;` as that also hides the popover.
+// `required` attribute, we have to "hide" the inputs via `clip`. We cannot use
+// `display: none;` or `visibility: hidden;` as that also hides the popover.
+// Simply visually hiding the inputs via `opacity` would leave them clickable in
+// certain cases which is prevented by using `clip` and `pointer-events`.
 // This way, we ensure a DOM element is visible to position the popover from.
 //
-// See https://github.com/twbs/bootstrap/pull/12794 for more.
+// See https://github.com/twbs/bootstrap/pull/12794 and
+// https://github.com/twbs/bootstrap/pull/14559 for more information.
 
 [data-toggle="buttons"] {
   > .btn,
@@ -238,8 +241,8 @@
     input[type="radio"],
     input[type="checkbox"] {
       position: absolute;
-      z-index: -1;
-      .opacity(0);
+      clip: rect(0,0,0,0);
+      pointer-events: none;
     }
   }
 }