mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-21 04:41:36 +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.

55
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,28 +219,25 @@
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 {
content: "Choose file...";
}
.file-custom::before {
position: absolute;
top: -.075rem;
right: -.075rem;
bottom: -.075rem;
z-index: 6;
display: block;
height: 2.5rem;
padding: .5rem 1rem;
line-height: 1.5;
color: #555;
content: "Browse";
background-color: #eee;
border: $input-btn-border-width solid #ddd;
border-radius: 0 .25rem .25rem 0;
}
// Focus state &::after {
.file input:focus ~ .file-custom { content: "Choose file...";
@include box-shadow(0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9); }
&::before {
position: absolute;
top: -.075rem;
right: -.075rem;
bottom: -.075rem;
z-index: 6;
display: block;
height: 2.5rem;
padding: .5rem 1rem;
line-height: 1.5;
color: #555;
content: "Browse";
background-color: #eee;
border: $input-btn-border-width solid #ddd;
border-radius: 0 .25rem .25rem 0;
}
} }