mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-28 23:59:53 +02:00
Code Issues Releases Wiki Activity

Properly hide checkbox and radio inputs in button groups

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

Fixes #14137
This commit is contained in:
Heinrich Fenkart
2014-09-07 22:45:54 +02:00
parent c22b270582
commit 475152a9a1
1 changed files with 8 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
less/button-groups.less
View File

@@ -226,11 +226,14 @@
// Checkbox and radio options // Checkbox and radio options
// //
// In order to support the browser's form validation feedback, powered by the // 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 // `required` attribute, we have to "hide" the inputs via `clip`. We cannot use
// use `display: none;` or `visibility: hidden;` as that also hides the popover. // `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. // 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"] { [data-toggle="buttons"] {
> .btn, > .btn,
@@ -238,8 +241,8 @@
input[type="radio"], input[type="radio"],
input[type="checkbox"] { input[type="checkbox"] {
position: absolute; position: absolute;
z-index: -1; clip: rect(0,0,0,0);
.opacity(0); pointer-events: none;
} }
} }
} }