{"id":4828,"date":"2017-12-07T10:26:21","date_gmt":"2017-12-07T10:26:21","guid":{"rendered":"http:\/\/a1webdesignteam.com\/blog\/?p=4828"},"modified":"2017-12-07T10:26:21","modified_gmt":"2017-12-07T10:26:21","slug":"customizing-file-inputs","status":"publish","type":"post","link":"https:\/\/a1webdesignteam.com\/blog\/customizing-file-inputs\/","title":{"rendered":"Customizing File Inputs"},"content":{"rendered":"

here are quite a few techniques for \u201ccustomizing\u201d the\u00a0<input type=\"file\" \/><\/code>\u00a0element. I tried most of them, but none was good enough to have on\u00a0Readerrr\u00a0(for importing feeds by uploading a file). Probably the worst technique was the one where the input element is put into a container (which imitates a button), and the input follows the cursor so that when you click anywhere on the container, you actually click the input. Sounds interesting and weird at the same time, right? Anyway, it had some unacceptable drawbacks (usability,\u00a0touch<\/em>).<\/p>\n

As as result, I tried\u00a0googling<\/em>\u00a0for an unseen solution. Once it seemed that there was nothing new, my I eyes were caught by a comment on StackOverflow. It had just a few\u00a0up votes<\/em>\u00a0and was lost somewhere in the middle of the page, but most importantly it contained a magic word \u2013\u00a0<label><\/code>! As you may know, pressing a label basically triggers the focus event for the\u00a0bound<\/abbr>\u00a0input. Interesting thing is that, if it is a file input, it works out as a click event, resulting in opening a file browser. This is great for crafting a semantic solution.<\/p>\n

<input<\/span> type<\/span>=\"file\"<\/span> name<\/span>=\"file\"<\/span> id<\/span>=\"file\"<\/span> class<\/span>=\"inputfile\"<\/span> \/><\/span>\r\n<label<\/span> for<\/span>=\"file\"<\/span>><\/span>Choose a file<\/label<\/span>><\/span><\/pre>\n
So, pressing any of these two elements gives us the same result. That means that the most difficult part is\u2026 solved! No JavaScript, no other complex solutions like cursor position tracking, just these two lines. See for yourself:<\/p>\n
\"\"<\/p>\n
Now let\u2019s just style it and make this look like a\u00a0normal<\/em>\u00a0button.<\/p>\n
Hiding the\u00a0<input><\/code><\/h2>\n
First off, we need to hide the ugly duckling. CSS properties such as\u00a0display: none<\/code>\u00a0or\u00a0visibility: hidden<\/code>\u00a0will<\/strong>\u00a0not work<\/strong>\u00a0out. The reasons are: the input value will not be sent to the server on form submit; the input will be excluded out of tab order (you want your website to be accessible, right?). I set up a combination of CSS properties\/values for hiding the input visually but keeping it\u00a0visible<\/em>\u00a0for the browser:<\/p>\n
.inputfile<\/span> {\r\n\twidth<\/span>: 0.1px<\/span><\/span><\/span>;\r\n\theight<\/span>: 0.1px<\/span><\/span><\/span>;\r\n\topacity<\/span>: 0<\/span><\/span><\/span>;\r\n\toverflow<\/span>: hidden<\/span><\/span>;\r\n\tposition<\/span>: absolute<\/span><\/span>;\r\n\tz-index<\/span>: -1<\/span><\/span><\/span>;\r\n}<\/span><\/span>\r\n<\/pre>\n
I see you are wondering why\u00a0width<\/code>\u00a0and\u00a0height<\/code>\u00a0are set to\u00a00.1px<\/code>\u00a0instead of just\u00a00px<\/code>. Setting the property values to zero ends up throwing the element out of tab party in some browsers. And\u00a0position: absolute<\/code>\u00a0guarantees the element does not interfere with the sibling elements.<\/p>\n
Styling the\u00a0<label><\/code><\/h2>\n
Since the\u00a0<label><\/code>\u00a0element is visually the button, you can use all of your creative CSS juices on it. I\u2019m sticking to something very simple for now:<\/p>\n
.inputfile<\/span> + label<\/span> {\r\n    font-size<\/span>: 1.25em<\/span><\/span><\/span>;\r\n    font-weight<\/span>: 700<\/span><\/span><\/span>;\r\n    color<\/span>: white<\/span><\/span>;\r\n    background-color<\/span>: black<\/span><\/span>;\r\n    display<\/span>: inline-block<\/span><\/span>;\r\n}<\/span><\/span>\r\n\r\n.inputfile<\/span>:focus<\/span> + label<\/span>,\r\n.inputfile<\/span> + label<\/span>:hover<\/span> {\r\n    background-color<\/span>: red<\/span><\/span>;\r\n}<\/span><\/span><\/pre>\n
Accessibility<\/h2>\n
How do you know that an element on the website is\u00a0pressable<\/em>? Firstly, the element should communicate a feeling that you can tap or click on it. Secondly, the cursor icon should change to an appropriate one when\u00a0hovering<\/em>\u00a0the element. The former we\u2019ve solved previously, let\u2019s solve the latter, because labels do not trigger a cursor change by default:<\/p>\n
.inputfile<\/span> + label<\/span> {\r\n\tcursor<\/span>: pointer<\/span><\/span>; \/* \"hand\" cursor *\/<\/span>\r\n}<\/span><\/span><\/pre>\n
\"\"\"\"<\/p>\n
Keyboard Navigation<\/h3>\n
If users are unable to navigate on your website using just a keyboard, you are doing something wrong. Hiding the input itself in a correct manner was one thing, the other is indicating when the element is\u00a0focused<\/em>, i.e. rendering\u00a0.inputfile:focus<\/code>\u00a0on the\u00a0label<\/code>:<\/p>\n
.inputfile<\/span>:focus<\/span> + label<\/span> {\r\n\toutline<\/span>: 1px<\/span> dotted #000<\/span><\/span><\/span>;\r\n\toutline<\/span>: -webkit-focus-ring-color auto 5px<\/span><\/span><\/span>;\r\n}<\/span><\/span><\/pre>\n
-webkit-focus-ring-color auto 5px<\/code>\u00a0is a little trick for obtaining default outline looks on Chrome, Opera and Safari. The style in the line above is for browsers that do not understand the\u00a0-webkit\u2026<\/code>expression.<\/p>\n
\"\"<\/p>\n
Possible\u00a0Touch<\/em>\u00a0Issues<\/h2>\n
In case you\u2019ve been using\u00a0FastClick<\/a>\u00a0(a library for eliminating the 300ms\u00a0tap-pause<\/em>\u00a0on touch-capable devices) and have plans to add some extra markup to the content of a label, the button won\u2019t work as it should, unless you use\u00a0pointer-events: none<\/code>, respectively:<\/p>\n
<label<\/span> for<\/span>=\"file\"<\/span>><\/span><strong<\/span>><\/span>Choose a file<\/strong<\/span>><\/span><\/label<\/span>><\/span><\/pre>\n
.inputfile<\/span> + label<\/span> * {\r\n\tpointer-events<\/span>: none<\/span><\/span>;\r\n}<\/span><\/span><\/pre>\n
JavaScript Enhancement<\/h2>\n
Probably and hopefully the last thing missing is indicating if\u00a0files were\u00a0selected. The file input does usually indicate that, but in our case the input is visually hidden. Luckily, there is a way out: a tiny JavaScript enhancement. The text of a label becomes the name of the selected file. If there were multiple files selected, the text will tell us how many of them were selected.<\/p>\n
<input type=\"file\"<\/span> name=\"file\"<\/span> id=\"file\"<\/span> class<\/span><\/span>=\"inputfile\"<\/span> data-multiple-caption=\"{count} files selected\"<\/span> multiple \/><\/pre>\n
var<\/span> inputs = document<\/span>.querySelectorAll( '.inputfile'<\/span> );\r\nArray<\/span>.prototype.forEach.call( inputs, function<\/span>( input )<\/span>\r\n<\/span>{\r\n\tvar<\/span> label\t = input.nextElementSibling,\r\n\t\tlabelVal = label.innerHTML;\r\n\r\n\tinput.addEventListener( 'change'<\/span>, function<\/span>( e )<\/span>\r\n\t<\/span>{\r\n\t\tvar<\/span> fileName = ''<\/span>;\r\n\t\tif<\/span>( this<\/span>.files && this<\/span>.files.length > 1<\/span> )\r\n\t\t\tfileName = ( this<\/span>.getAttribute( 'data-multiple-caption'<\/span> ) || ''<\/span> ).replace( '{count}'<\/span>, this<\/span>.files.length );\r\n\t\telse<\/span>\r\n\t\t\tfileName = e.target.value.split( '\\\\'<\/span> ).pop();\r\n\r\n\t\tif<\/span>( fileName )\r\n\t\t\tlabel.querySelector( 'span'<\/span> ).innerHTML = fileName;\r\n\t\telse<\/span>\r\n\t\t\tlabel.innerHTML = labelVal;\r\n\t});\r\n});<\/pre>\n
There is also a jQuery version of this code presented in the source of the demo files. Make sure to check them out.<\/p>\n
A little explanation:<\/p>\n