diff --git a/docs/4.0/components/forms.md b/docs/4.0/components/forms.md index 3668fbb122fa..7b4fa0e19633 100644 --- a/docs/4.0/components/forms.md +++ b/docs/4.0/components/forms.md @@ -1018,6 +1018,46 @@ Custom ` {% endexample %} +You may also choose from small and large custom selects to match our similarly sized text inputs. + +{% example html %} + + + +{% endexample %} + +The `multiple` attribute is also supported: + +{% example html %} + +{% endexample %} + +As is the `size` attribute: + +{% example html %} + +{% endexample %} + ### File browser The file input is the most gnarly of the bunch and require additional JavaScript if you'd like to hook them up with functional *Choose file...* and selected file name text. diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss index 455a208865aa..12568a6f9755 100644 --- a/scss/_custom-forms.scss +++ b/scss/_custom-forms.scss @@ -149,7 +149,7 @@ &:focus { border-color: $custom-select-focus-border-color; outline: 0; - @include box-shadow($custom-select-focus-box-shadow); + box-shadow: $custom-select-focus-box-shadow; &::-ms-value { // For visual consistency with other platforms/browsers, @@ -162,8 +162,10 @@ } } - &[multiple] { + &[multiple], + &[size]:not([size="1"]) { height: auto; + padding-right: $custom-select-padding-x; background-image: none; } @@ -185,6 +187,13 @@ font-size: $custom-select-font-size-sm; } +.custom-select-lg { + height: $custom-select-height-lg; + padding-top: $custom-select-padding-y; + padding-bottom: $custom-select-padding-y; + font-size: $custom-select-font-size-lg; +} + // File // @@ -206,7 +215,12 @@ opacity: 0; &:focus ~ .custom-file-control { + border-color: $custom-file-focus-border-color; box-shadow: $custom-file-focus-box-shadow; + + &::before { + border-color: $custom-file-focus-border-color; + } } } diff --git a/scss/_variables.scss b/scss/_variables.scss index 99a5179a8119..cabf14a7fc90 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -483,15 +483,19 @@ $custom-select-border-width: $input-btn-border-width !default; $custom-select-border-color: $input-border-color !default; $custom-select-border-radius: $border-radius !default; -$custom-select-focus-border-color: lighten(theme-color("primary"), 25%) !default; -$custom-select-focus-box-shadow: inset 0 1px 2px rgba($black, .075), 0 0 5px rgba($custom-select-focus-border-color, .5) !default; +$custom-select-focus-border-color: $input-focus-border-color !default; +$custom-select-focus-box-shadow: inset 0 1px 2px rgba($black, .075), $input-btn-focus-box-shadow !default; $custom-select-font-size-sm: 75% !default; $custom-select-height-sm: $input-height-sm !default; +$custom-select-font-size-lg: 125% !default; +$custom-select-height-lg: $input-height-lg !default; + $custom-file-height: $input-height !default; $custom-file-width: 14rem !default; -$custom-file-focus-box-shadow: 0 0 0 .075rem $white, 0 0 0 .2rem theme-color("primary") !default; +$custom-file-focus-border-color: $input-focus-border-color !default; +$custom-file-focus-box-shadow: $input-btn-focus-box-shadow !default; $custom-file-padding-y: $input-btn-padding-y !default; $custom-file-padding-x: $input-btn-padding-x !default;