Merge pull request #14559 from hnrch02/properly-hide-btngroup-checkbox-n-radio

Properly hide checkbox and radio inputs in button groups
This commit is contained in:
Heinrich Fenkart 2014-09-08 20:32:20 +02:00
commit 285feb4dd7
1 changed files with 8 additions and 5 deletions

View File

@ -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;
}
}
}