diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss index 9133f7dbdaed..fe2a4d5054cb 100644 --- a/scss/_custom-forms.scss +++ b/scss/_custom-forms.scss @@ -140,6 +140,7 @@ color: $custom-select-color; vertical-align: middle; background: $custom-select-bg $custom-select-indicator no-repeat right $custom-select-padding-x center; + background-clip: padding-box; background-size: $custom-select-bg-size; border: $custom-select-border-width solid $custom-select-border-color; @include border-radius($custom-select-border-radius); @@ -216,11 +217,13 @@ z-index: 5; height: $custom-file-height; padding: $custom-file-padding-x $custom-file-padding-y; + overflow: hidden; line-height: $custom-file-line-height; color: $custom-file-color; pointer-events: none; user-select: none; background-color: $custom-file-bg; + background-clip: padding-box; border: $custom-file-border-width solid $custom-file-border-color; @include border-radius($custom-file-border-radius); @include box-shadow($custom-file-box-shadow); @@ -233,9 +236,8 @@ &::before { position: absolute; - top: -$custom-file-border-width; - right: -$custom-file-border-width; - bottom: -$custom-file-border-width; + top: 0; + right: 0; z-index: 6; display: block; height: $custom-file-height; @@ -243,8 +245,7 @@ line-height: $custom-file-line-height; color: $custom-file-button-color; background-color: $custom-file-button-bg; - border: $custom-file-border-width solid $custom-file-border-color; - @include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0); + border-left: $custom-file-border-width solid $custom-file-border-color; } @each $lang, $text in map-get($custom-file-text, button-label) { diff --git a/scss/_input-group.scss b/scss/_input-group.scss index 0b668bff3c36..0c9920a2c418 100644 --- a/scss/_input-group.scss +++ b/scss/_input-group.scss @@ -74,6 +74,7 @@ color: $input-color; text-align: center; background-color: $input-group-addon-bg; + background-clip: padding-box; border: $input-btn-border-width solid $input-group-addon-border-color; @include border-radius($input-border-radius); @@ -144,6 +145,8 @@ // element above the siblings. > .btn { position: relative; + background-clip: padding-box; + border: $input-btn-border-width solid $input-group-btn-border-color; + .btn { margin-left: (-$input-btn-border-width); diff --git a/scss/_variables.scss b/scss/_variables.scss index fccee460bfb6..ecd3e75f3f80 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -431,6 +431,7 @@ $form-group-margin-bottom: 1rem !default; $input-group-addon-bg: $gray-lighter !default; $input-group-addon-border-color: $input-border-color !default; +$input-group-btn-border-color: $input-border-color !default; $custom-control-gutter: 1.5rem !default; $custom-control-spacer-y: .25rem !default;