rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +01:00
Code Issues Actions Packages Releases 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
Show Stats 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
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 %}
<label class="file">
<input type="file" id="file">
<span class="file-custom"></span>
<label class="custom-file">
<input type="file" id="file" class="custom-file-input">
<span class="custom-file-control"></span>
</label>
{% 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 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.
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.
.file {
.custom-file {
position: relative;
display: inline-block;
max-width: 100%;
height: 2.5rem;
cursor: pointer;
}
.file input {
.custom-file-input {
min-width: 14rem;
max-width: 100%;
margin: 0;
filter: alpha(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;
top: 0;
right: 0;
@ -213,28 +219,25 @@
border: $input-btn-border-width solid #ddd;
border-radius: .25rem;
@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
.file input:focus ~ .file-custom {
@include box-shadow(0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9);
&::after {
content: "Choose file...";
}
&::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;
}
}