Akshaya Raghuvanshi Akshaya Raghuvanshi 2, 18 18 silver badges 21 21 bronze badges. Nice, thanks. I will make the text to look like the default button. But I don't know why. I'm curious how accessible is this? Sufiyan Ansari Sufiyan Ansari 1, 17 17 silver badges 21 21 bronze badges.
Sign up or log in Sign up using Google. Sign up using Facebook. Sign up using Email and Password. Post as a guest Name. Email Required, but never shown. The Overflow Blog. Stack Gives Back Safety in numbers: crowdsourcing data on nefarious IP addresses. 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:. How are we doing? Please help us improve Stack Overflow. Take our short survey. 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, 10 months ago.
Active 15 days ago. Viewed 1. 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! 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. You should use position: absolute; left: rem instead of display: none for accessibility reasons.
Most of the time, screen readers will not read elements if they are hidden using the display: none method. I'm very surprised to find no-one seems to have considered keyboard accessibility. Adding tabindex is not a solution because the label will still not be actioned when it has focus and the user presses enter. I solved this by visually hiding the input, so it can still be focussed, and then using :focus-within on the label parent: jsbin.
Show 21 more comments. Jonathan Moffatt Jonathan Moffatt Just found a jquery solution based on this script here: blog. It gives you an access denied error. For normal uploads, I agree it is the easiest though! A much simpler solution than quirksmode's is explained here. Just putting that link here, since this answer is basically a link-only answer anyway.
If you only want a bottom border, use the border-bottom property:. Use the background-color property to add a background color to the input, and the color property to change the text color:. By default, some browsers will add a blue outline around the input when it gets focus clicked on. You can remove this behavior by adding outline: none; to the input. Use the :focus selector to do something with the input field when it gets focus:. If you want an icon inside the input, use the background-image property and position it with the background-position property.
Also notice that we add a large left padding to reserve the space of the icon:. In this example we use the CSS transition property to animate the width of the search input when it gets focus. You will learn more about the transition property later, in our CSS Transitions chapter. Tip: Use the resize property to prevent textareas from being resized disable the "grabber" in the bottom right corner :. Resize the browser window to see the effect. When the screen is less than px wide, make the two columns stack on top of each other instead of next to each other.
0コメント