You could hide it, but I think some browsers will not trigger the label functionality, so you won't be able to choose a file. You can then style the label how you want, or even wrap it in an a tag so it will behave exactly like the other links on your page. The disadvantage of hiding the input is that you will not be able to see the chosen file.
If you need to do that you can show it in the label with a simple bit of jquery:. Here is another solution similar to the above but I separate the input tag and show the link instead. 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. Ask Question. Asked 7 years, 1 month ago. Active 3 years ago. Viewed 12k times. Is it possible? Improve this question.
Freewind Freewind k gold badges silver badges bronze badges. From experience, this is a very hard element to style, particularly in older versions of the browser. You want to style the file -button as a link? I am able to do it with pure CSS using below code. I have used bootstrap and font-awesome.
This hides the input-file button, but under the hood clicks it from another normal button, that you can obviously style like any other button. This is the only solution with no downside apart from a useless DOM-node. Thanks to display:none; , the input-button does not reserve any visible space in the DOM. I don't know anymore to whom to give props for this. But I got that idea from somewhere here on Stackoverflow. I came across this problem recently and despite the plethora of answers on Stack Overflow, none really seemed to fit the bill.
In the end, I ended up customizing this so as to have a simple and an elegant solution. This is simple with jquery. To give a code example of Ryan 's suggestion with a slight modification. Be sure to set the styling on the input when you're ready: opacity: 0 You can't set display: none because it needs to be clickable.
But you can position it under the "new" button or tuck in under something else with z-index if you prefer.
Just cut-and-paste one block of styles, then test your file upload control. This solution does not attempt to hide then recreate the original HTML element like the other posts here do. It uses plain CSS without any circus tricks or third party tools to style the original file upload form control for all the major browsers. You do not need to even change your HTML code! This is a very simple clean design.
You can change it to look any way you like:. Internet Explorer gives you limited design control, but at least you can manipulate the control using CSS enough to change a few things, including rounded borders and colors:. That just destroys usability for everyone online.
Styling the original HTML control means your file upload control is guaranteed to work well in 25 years worth of web browsers, old and new. This is why you cannot trust all these scripted hacks here that erase, rewrite, or destroy HTML just to try and recreate some visual experience. That shows that you do not understand how HTML is used or why its been around for 30 years practically unchanged. You should never try and rewrite HTML's native form control functionality.
There is more to using natural HTML in websites than just manipulation of markup for some forced visual experience. The trade-offs of limited visual design in these replaced HTML elements was designed that way for a reason. I would normally use simple javascript to customize the file input tag. A hidden input field,on click of button,javascript call the hidden field,simple solution with out any css or bunch of jquery.
Here we use a span to trigger input of type file and we simply customized that span , so we can add any styling using this way. Note that we use input tag with visibility:hidden option and trigger it in the span.
You could do the same with a bootstrap button. JavaScript IS necessary to get it working for general usage. Please study how gmail and DropZone do it if you don't believe me. Just style a normal button however you want, then call a simple JS function to create and link a hidden input element to your styled button. Notice how the above code re-links it after every time the user chooses a file.
This is important because "onchange" is only called if the user changes the filename. But you probably want to get the file every time the user provides it. Works on every other type of element as expected, but doesn't work on file inputs. A much better way to do this is to just create a file input and a label that links to it. Turned this into a Stylus mixin. Should be easy enough for one of you cool SCSS cats to convert it.
I've found a very easy method to switch the file button to a picture. You just label a picture and place it on top of the file button. This week I also needed to custom the button and display the selected file name aside it, so after reading some of the answers above Thanks BTW I came up with the following implementation:.
The best way is using the pseudo element :after or :before as an element overt the de input. Then style that pseudo element as you wish. I recomend you to do as a general style for all input files as follows:. 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. Asked 12 years, 11 months ago. Active 15 days ago. Viewed 1. Improve this question. BSMP 4, 8 8 gold badges 33 33 silver badges 43 43 bronze badges. Shivanand Shivanand 9, 5 5 gold badges 23 23 silver badges 31 31 bronze badges.
I will add my own answer to do it the way I did The problem with this element, seems to be that does not take styling like other elements similar to them. I applied the same styling to both input types, and this is what I got: i. Well, what worked for me was just placing a div above the Input element and style the div as you want. Then make Input opacity to 0 and make it the same size has the div. Add a comment. Active Oldest Votes. You don't need JavaScript for this!
Here is a cross-browser solution: See this example! Improve this answer. Community Bot 1 1 1 silver badge. Josh Crozier Josh Crozier k 53 53 gold badges silver badges bronze badges. I do have a question with this one though, when selecting a file how would we go about then displaying the file name? Great solution, but you actually do need javascript. Last Updated: September 30, Doesn't work in a major browser. Doesn't actually provide complete stylistic control.
Anyway: CSS. Is this buggy? Is there an even simpler way to do it? Leave a comment. Written by Barney Carroll. Related protips. Fully custom select box, simple css only Change the Bootstrap NavBar Breakpoint It's worth noting that feedback on the selected file is not at all standardized, but you can extract whatever the browser will allow using the following Javascript where fileInput is a reference to the file input : fileInput.
0コメント