mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-05-24 14:04:09 +03:00
Code 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
docs/components/forms.md
+6 -6
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.