Custom select updates (#24699)

* Add support for size attribute on custom selects * Add large custom select, document it and the small variant * fix custom select focus state * fix custom file input focus styles * remove empty line
twbs · Nov 24, 2017 · 2ec1606 · 2ec1606
1 parent b29e3f2
commit 2ec1606
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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;