Menu
Here is the design of the control I want to create:
As you can see, it's easy to create the design except the browse button of upload control. I created the rest. I've been searching about changing the place of Browse button but could not find anything useful.
So, how to do that? There was an idea like embedding an unvisible upload control over button but any other advice is golden, thanks.
315
To link a CSS file with your HTML file, you have to write the next script on your HTML file inside the head tag. To link a Js file with your HTML, you only have to add the source of the script inside the body tag or outside; it doesn't matter.
In this case type=”file” is required to upload a file. Name: The HTML INPUT NAME attribute is used to specify a name for an INPUT element. It is used to reference the form data after submitting the form or reference the JavaScript or CSS element. Submit: HTML's type=”submit” tag defines a submit button.
Use a label tag and point its for attribute to the id of the default HTML file upload button. By doing this, clicking the label element in the browser toggles the default HTML file upload button (as though we clicked it directly).
It's actually not as complicated as you may think. Check out this fiddle. Stylize your button how you will!
HTML
<input type="file" id="uploadme" />
<input type="button" id="clickme" value="Upload Stuff!" />
CSS
input[type=file] {
width: 1px;
visibility: hidden;
}
JavaScript
$(function(){
$('#clickme').click(function(){
$('#uploadme').click();
});
});
Here's are two excellent articles which shows you how to customize the appearance of file inputs.
jQuery Custom File Upload Input: from the book Designing with Progressive Enhancement by the Filament Group
Styling File Inputs with CSS and the DOM by Shaun Inman
29
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
