diff --git a/scss/_forms.scss b/scss/_forms.scss index 43d4110cd2d7..e528e2d1d6ee 100644 --- a/scss/_forms.scss +++ b/scss/_forms.scss @@ -201,14 +201,11 @@ textarea.form-control { // Indent the labels to position radios/checkboxes as hanging controls. .form-check { - position: relative; display: block; padding-left: $form-check-input-gutter; } .form-check-input { - position: absolute; - margin-top: $form-check-input-margin-y; margin-left: -$form-check-input-gutter; // Use disabled attribute instead of :disabled pseudo-class @@ -230,8 +227,6 @@ textarea.form-control { // Undo .form-check-input defaults and add some `margin-right`. .form-check-input { - position: static; - margin-top: 0; margin-right: $form-check-inline-input-margin-x; margin-left: 0; } diff --git a/scss/_input-group.scss b/scss/_input-group.scss index ac49f696cb30..980dd2ae681b 100644 --- a/scss/_input-group.scss +++ b/scss/_input-group.scss @@ -113,12 +113,6 @@ background-color: $input-group-addon-bg; border: $input-border-width solid $input-group-addon-border-color; @include border-radius($input-border-radius); - - // Nuke default margins from checkboxes and radios to vertically center within. - input[type="radio"], - input[type="checkbox"] { - margin-top: 0; - } } diff --git a/scss/_reboot.scss b/scss/_reboot.scss index 67ecd9e27513..6896b22345c2 100644 --- a/scss/_reboot.scss +++ b/scss/_reboot.scss @@ -405,10 +405,16 @@ button::-moz-focus-inner, border-style: none; } +// Fix alignment for checkboxes and radios. We assume the line height is the same +// as the line height of the body, but since there's no way to set the visual width +// and height of a native checkbox or radio without altering the appearance, this +// is the only workaround which works. The checkbox or radio will not be stretched, +// but be displayed in the middle of its height. input[type="radio"], input[type="checkbox"] { - box-sizing: border-box; // 1. Add the correct box sizing in IE 10- - padding: 0; // 2. Remove the padding in IE 10- + // stylelint-disable-next-line length-zero-no-unit + height: $line-height-base + 0em; + vertical-align: top; } diff --git a/scss/_variables.scss b/scss/_variables.scss index e2271491d5bc..8ac4223f6cef 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -521,7 +521,6 @@ $input-transition: border-color .15s ease-in-out, box-shado $form-text-margin-top: .25rem !default; $form-check-input-gutter: 1.25rem !default; -$form-check-input-margin-y: .3rem !default; $form-check-input-margin-x: .25rem !default; $form-check-inline-margin-x: .75rem !default; diff --git a/site/content/docs/4.3/content/reboot.md b/site/content/docs/4.3/content/reboot.md index ba0d3d138cb4..bfc5dd12dbfb 100644 --- a/site/content/docs/4.3/content/reboot.md +++ b/site/content/docs/4.3/content/reboot.md @@ -204,6 +204,7 @@ Various form elements have been rebooted for simpler base styles. Here are some - ``s, like fieldsets, have also been restyled to be displayed as a heading of sorts. - `