diff options
author | Heinrich Fenkart <hnrch02@gmail.com> | 2014-09-08 00:45:54 +0400 |
---|---|---|
committer | Heinrich Fenkart <hnrch02@gmail.com> | 2014-09-08 16:56:29 +0400 |
commit | 475152a9a14fe09035a596b71573d7325b23bdaa (patch) | |
tree | 0274e85a2c78d72704fe0cdaf6d2d732c44b642e /less | |
parent | c22b2705829f43ccd79f83c3e89d011a3cf5461f (diff) |
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
Diffstat (limited to 'less')
-rw-r--r-- | less/button-groups.less | 13 |
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; } } } |