diff --git a/docs/4.0/components/forms.md b/docs/4.0/components/forms.md index 5b79626a2640b6236ddf208c8fba2b4428ca39df..eba9fc75f46112510ae29c728d21583ef45965f3 100644 --- a/docs/4.0/components/forms.md +++ b/docs/4.0/components/forms.md @@ -1018,6 +1018,46 @@ Custom `<select>` menus need only a custom class, `.custom-select` to trigger th </select> {% endexample %} +You may also choose from small and large custom selects to match our similarly sized text inputs. + +{% example html %} +<select class="custom-select custom-select-lg"> + <option selected>Open this select menu</option> + <option value="1">One</option> + <option value="2">Two</option> + <option value="3">Three</option> +</select> + +<select class="custom-select custom-select-sm"> + <option selected>Open this select menu</option> + <option value="1">One</option> + <option value="2">Two</option> + <option value="3">Three</option> +</select> +{% endexample %} + +The `multiple` attribute is also supported: + +{% example html %} +<select class="custom-select" multiple> + <option selected>Open this select menu</option> + <option value="1">One</option> + <option value="2">Two</option> + <option value="3">Three</option> +</select> +{% endexample %} + +As is the `size` attribute: + +{% example html %} +<select class="custom-select" size="3"> + <option selected>Open this select menu</option> + <option value="1">One</option> + <option value="2">Two</option> + <option value="3">Three</option> +</select> +{% 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 4e38021df0e16aa6f907e8734ebf8bed86d1e4fe..e21a81ff871155a0444a3f19c1a2320d6377cefb 100644 --- a/scss/_custom-forms.scss +++ b/scss/_custom-forms.scss @@ -167,7 +167,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, @@ -180,8 +180,10 @@ } } - &[multiple] { + &[multiple], + &[size]:not([size="1"]) { height: auto; + padding-right: $custom-select-padding-x; background-image: none; } @@ -203,6 +205,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 // @@ -224,7 +233,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 acea370fb23e66a2cec233657b057885376aa851..788c55a4921320831f281ba68fc11a062bd0e80d 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;