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;