mdo/wtf-forms — pull request #22 by fabianfetik (2014-05-16 19:01:06+00:00)
Title: Showing filenames where possible

This is my attempt to satisfy issues #1 and is coincidentally related to #21 because I wanted to avoid repetition.
It shows uploaded filenames via progressive enhancement in webkit browsers and ie10+, "gracefully" falling back to the previous styles (text "Choose file..." not being updated) where not possible.

Summary of changes:
---
- showing the original file input field in webkit and ie10+ and hiding the button via pseudo-selectors
- falling back to hiding file input and showing our custom element in firefox and ie9 where pseudo-selectors are not available
- fixed width of input and button to not have overlapping content when either the button text or the name of the selected file is too long
- adjusted paddings a little for a more even look of space between uploaded filename and button
- moved button text and placeholder text to data attributes to help with translations and avoid repetition
- removed default outline of focussed input

Tested and working in Chrome 34.0.1847.137, Opera 21.0.1432.67, Firefox 29.0.1, IE9, IE11

It is suggested that you specify a width for `` for optimum cross-browser rendering, otherwise it will appear a lot more narrow in IE than in other browsers.
This can be achieved also by using e.g. bootstrap column classes.

disclaimer: when I say ie10+ it is actually untested in ie10 (currently don't have a vm for that at hand) but works in ie11 and I expect it to work in ie10 as well (first version to introduce the pseudo-selector which is used to hide the default button)