Cross browser input file style

Find centralized, trusted content and collaborate around the technologies you use most. Connect and share knowledge within a single location that is structured and easy to search. I am using a hack to make the file input appear consistent across all browsers. I am using this technique. Basically, you set the opacity of the file upload input to 0, and absolutely position it above another input that is styled for cross browser consistency.

When the user clicks on the "File Upload" area they are really clicking the input below it, but because the opacity of the upload area is zero, it still triggers the upload dialog box. This hack works very well read more in the link , however, there is one main issue: Because the opacity is set to 0, you dont see the file path, which is necessary to let the user know that the browse button worked.

That said, when a user selects a file, the file name is displayed in the other input as a value. Don't depend only in the opacity for the click. If the user is using a browser that have a inconsistent display such as mobile browser , the file input may not be exactly above the "fake" input, so he will not be able to click it.

Here is an equivalent solution, but depends on javascript to click on the real input: html. Note that the "real" input is not hidden, , but you can apply a display:none to it:. Based on that, it's kinda easy to create a script that automatically finds all input files and replace with fake files on page load. Stack Overflow for Teams — Collaborate and share knowledge with a private group. Create a free Team What is Teams? Collectives on Stack Overflow. Learn more.

Learn more. Cross-browser custom styling for file upload button [duplicate] Ask Question. Asked 7 years, 11 months ago. Active 3 years, 8 months ago. Viewed k times. Improve this question. Community Bot 1 1 1 silver badge. Joeytje50 Joeytje50 Use quirsmode but with a big font-size. Add a comment. Active Oldest Votes. You'd to use something like the following: label. Improve this answer. Hassan Baig Yeah, that's what I meant with the "you'll have to define the styles for the buttons yourself".

This is brilliant. As for buttons inside label elements it's perfectly fine. They can contain any phrasing content which includes input and button as long as it's not labelled by something else or is another label. Source: html. What is the code that doesn't work for you? PS: IE7 is used by only 0. This works great for me, my only issue is that after a file is selected, it doesn't actually show that a file has been selected.

Is there any way to show an indicator that a file has been chosen? That's what's done with the :valid and :invalid code in the CSS. Alternatively you could change the text using something like this. You can't show what the selected file is exactly though, this way. Show 11 more comments. I'm going to have to say this is not an answer to the original question, which explicitly mentions this approach by Quirksmode , which uses the same basic principle as your answer.

He was complaing about that it won't resize, but now with font-size it will. Quote: "My major issue with this Quirksmode's approach is that the file button will still have the browser-defined dimensions, so it won't automatically adjust to whatever's used as button that's placed below it.

This solution with a large font has the disadvantage that if you have clickable elements near the file upload button, you can't click on them because the clickable area is covering the elements beneath The input file CSS possibilities are limitless once you understand how this technique works!

It must have a label preceding it, this will become the upload button:. In order to keep it accessible, use the following CSS:. Why 1x1px? Setting property values to zero ends up throwing the element out of tab order in some browsers. From there, use your creative CSS juices on it! Check out the basic example below:. You can now adjust the styling as needed to create your own upload button to match your site styles. If users are unable to navigate your website using just a keyboard, you are doing something wrong.

Hiding the input correctly and indicating when the element is focused i. Having the native [multiple] attribute allows users to select more than one file per upload. Whereas [data-multiple-caption] is a fictive attribute for expressing the message if multiple files were selected. Here you can set a custom message. An interesting thing is that you can unset a value of the input by pressing the ESC button while in the file browser.

This is possible only in Chrome and Opera. Therefore, we use labelVal for storing the default value of the label and bringing it back when necessary. For the latter case, we simply rely on value. There is also a jQuery version of this code you can download here. Since there is no JavaScript-less way to indicate if any files were selected, it would be better to rely on the default looks of the file input for the sake of usability. Styling file inputs with an enhanced UX is a cinch. All we need to do is to add a.

Many frameworks like Foundation and Bootstrap already do this.