mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-22 13:13:03 +02:00
Code Issues Releases Wiki Activity

rewrite custom file input component to use classes over nested elements

Browse Source
This commit is contained in:
Mark Otto
2016-01-05 23:45:44 -08:00
parent ac446058ff
commit d8d67eaa6a
2 changed files with 35 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
docs/components/forms.md
View File

@@ -709,14 +709,16 @@ Custom selects degrade nicely in IE9, receiving only a handful of overrides to r
### File browser ### 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.
{% example html %} {% example html %}
<label class="file"> <label class="custom-file">
<input type="file" id="file"> <input type="file" id="file" class="custom-file-input">
<span class="file-custom"></span> <span class="custom-file-control"></span>
</label> </label>
{% endexample %} {% endexample %}
The file input is the most gnarly of the bunch. Here's how it works: Here's how it works:
- We wrap the `<input>` in a `<label>` so the custom control properly triggers the file browser. - We wrap the `<input>` in a `<label>` so the custom control properly triggers the file browser.
- We hide the default file `<input>` via `opacity`. - We hide the default file `<input>` via `opacity`.
@@ -725,5 +727,3 @@ The file input is the most gnarly of the bunch. Here's how it works:
- We declare a `height` on the `<input>` for proper spacing for surrounding content. - We declare a `height` on the `<input>` for proper spacing for surrounding content.
In other words, it's an entirely custom element, all generated via CSS. In other words, it's an entirely custom element, all generated via CSS.
**Heads up!** The custom file input is currently unable to update the *Choose file...* text with the filename. Without JavaScript, this might not be possible to change, but I'm open to ideas.

23
scss/_custom-forms.scss
View File

@@ -184,21 +184,27 @@
// //
// Custom file input. // Custom file input.
.file { .custom-file {
position: relative; position: relative;
display: inline-block; display: inline-block;
max-width: 100%; max-width: 100%;
height: 2.5rem; height: 2.5rem;
cursor: pointer; cursor: pointer;
} }
.file input {
.custom-file-input {
min-width: 14rem; min-width: 14rem;
max-width: 100%; max-width: 100%;
margin: 0; margin: 0;
filter: alpha(opacity = 0); filter: alpha(opacity = 0);
opacity: 0; opacity: 0;
&:focus ~ .custom-file-control {
@include box-shadow(0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9);
} }
.file-custom { }
.custom-file-control {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
@@ -213,11 +219,12 @@
border: $input-btn-border-width solid #ddd; border: $input-btn-border-width solid #ddd;
border-radius: .25rem; border-radius: .25rem;
@include box-shadow(inset 0 .2rem .4rem rgba(0,0,0,.05)); @include box-shadow(inset 0 .2rem .4rem rgba(0,0,0,.05));
}
.file-custom::after { &::after {
content: "Choose file..."; content: "Choose file...";
} }
.file-custom::before {
&::before {
position: absolute; position: absolute;
top: -.075rem; top: -.075rem;
right: -.075rem; right: -.075rem;
@@ -233,8 +240,4 @@
border: $input-btn-border-width solid #ddd; border: $input-btn-border-width solid #ddd;
border-radius: 0 .25rem .25rem 0; border-radius: 0 .25rem .25rem 0;
} }
// Focus state
.file input:focus ~ .file-custom {
@include box-shadow(0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9);
} }