diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss index d1fbf954f97c71865f1381b692fdbf173ab53138..ceb0278f4ab61eaadebc3205b5f362485e554a12 100644 --- a/scss/_custom-forms.scss +++ b/scss/_custom-forms.scss @@ -139,6 +139,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; @if $enable-rounded { @@ -215,11 +216,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); @@ -232,9 +235,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; @@ -242,8 +244,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 0b668bff3c36dc33b9a970b956994a1a4b9d2ba8..0c9920a2c4186b3f4c2aa356a19f81a9a4c1c1b3 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 794d12d83f66268bb9a0efcfb99472b4c06b3039..29fd3b627e53ed28821f6a1a65fb87c1374db3c2 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -400,6 +400,7 @@ $form-group-margin-bottom: 1rem !default; $input-group-addon-bg: $gray-200 !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;