+
-
- Open this select menu
- One
- Two
- Three
-
+
-
-
-
-
+
+
+
Choose file...
+
Example invalid custom file feedback
+
{% endexample %}
@@ -1062,24 +1068,16 @@ As is the `size` attribute:
### 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.
+The file input is the most gnarly of the bunch and requires additional JavaScript if you'd like to hook them up with functional *Choose file...* and selected file name text.
{% example html %}
-
-
-
-
+
+
+ Choose file
+
{% endexample %}
-Here's how it works:
-
-- We wrap the `
` in a `
` so the custom control properly triggers the file browser.
-- We hide the default file ` ` via `opacity`.
-- We use `::after` to generate a custom background and directive (*Choose file...*).
-- We use `::before` to generate and position the *Browse* button.
-- We declare a `height` on the ` ` for proper spacing for surrounding content.
-
-In other words, it's an entirely custom element, all generated via CSS.
+We hide the default file ` ` via `opacity` and instead style the ``. The button is generated and positioned with `::after`. Lastly, we declare a `width` and `height` on the ` ` for proper spacing for surrounding content.
#### Translating or customizing the strings
diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index 56093bc484..d99a86dc7f 100644
--- a/scss/_custom-forms.scss
+++ b/scss/_custom-forms.scss
@@ -225,7 +225,9 @@
}
.custom-file-input {
- max-width: 100%;
+ position: relative;
+ z-index: 2;
+ width: 100%;
height: $custom-file-height;
margin: 0;
opacity: 0;
@@ -238,49 +240,43 @@
border-color: $custom-file-focus-border-color;
}
}
+
+ @each $lang, $value in $custom-file-text {
+ &:lang(#{$lang}) ~ .custom-file-label::after {
+ content: $value;
+ }
+ }
}
-.custom-file-control {
+.custom-file-label {
position: absolute;
top: 0;
right: 0;
left: 0;
+ z-index: 1;
height: $custom-file-height;
padding: $custom-file-padding-y $custom-file-padding-x;
line-height: $custom-file-line-height;
color: $custom-file-color;
- pointer-events: none;
- user-select: none;
background-color: $custom-file-bg;
border: $custom-file-border-width solid $custom-file-border-color;
@include border-radius($custom-file-border-radius);
@include box-shadow($custom-file-box-shadow);
- @each $lang, $text in map-get($custom-file-text, placeholder) {
- &:lang(#{$lang}):empty::after {
- content: $text;
- }
- }
-
- &::before {
+ &::after {
position: absolute;
- top: -$custom-file-border-width;
- right: -$custom-file-border-width;
- bottom: -$custom-file-border-width;
- z-index: 1;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 3;
display: block;
- height: $custom-file-height;
+ height: calc(#{$custom-file-height} - #{$custom-file-border-width} * 2);
padding: $custom-file-padding-y $custom-file-padding-x;
line-height: $custom-file-line-height;
color: $custom-file-button-color;
+ content: "Browse";
@include gradient-bg($custom-file-button-bg);
- border: $custom-file-border-width solid $custom-file-border-color;
+ border-left: $custom-file-border-width solid $custom-file-border-color;
@include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0);
}
-
- @each $lang, $text in map-get($custom-file-text, button-label) {
- &:lang(#{$lang})::before {
- content: $text;
- }
- }
}
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 8355bf5b8f..0f299a436f 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -509,12 +509,7 @@ $custom-file-box-shadow: $input-box-shadow !default;
$custom-file-button-color: $custom-file-color !default;
$custom-file-button-bg: $input-group-addon-bg !default;
$custom-file-text: (
- placeholder: (
- en: "Choose file..."
- ),
- button-label: (
- en: "Browse"
- )
+ en: "Browse"
) !default;
diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index ba1b16d6a1..d25df182df 100644
--- a/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@ -88,11 +88,18 @@
background-color: lighten($color, 25%);
}
}
+
+ ~ .#{$state}-feedback,
+ ~ .#{$state}-tooltip {
+ display: block;
+ }
+
&:checked {
~ .custom-control-label::before {
@include gradient-bg(lighten($color, 10%));
}
}
+
&:focus {
~ .custom-control-label::before {
box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-focus-width rgba($color, .25);
@@ -105,13 +112,19 @@
.custom-file-input {
.was-validated &:#{$state},
&.is-#{$state} {
- ~ .custom-file-control {
+ ~ .custom-file-label {
border-color: $color;
&::before { border-color: inherit; }
}
+
+ ~ .#{$state}-feedback,
+ ~ .#{$state}-tooltip {
+ display: block;
+ }
+
&:focus {
- ~ .custom-file-control {
+ ~ .custom-file-label {
box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
}
}