How to Replace The File Browse Button in HTML

What is the best way to replace the file browse button in html?

The best way is to make the file input control almost invisible (by giving it a very low opacity - do not do "visibility: hidden" or "display: none") and absolutely position something under it - with a lower z-index.

This way, the actual control will not be visible, and whatever you put under it will show through. But since the control is positioned above that button, it will still capture the click events (this is why you want to use opacity, not visibility or display - browsers make the element unclickable if you use those to hide it).

This article goes in-depth on the technique.

Changing style of file browse button

No, it cannot be changed.

However there is a trick widely circulated around the web. The idea is to give the <input type="file"/> an opacity value of 0.1 and position it on top of an image. For all practical purposes it will be invisible and only the picture will be visible, but it will receive mouse clicks. With some Javascript then you can show the selected file name(s) elsewhere on the page.

How to rename HTML browse button of an input type=file?

The button isn't called the "browse button" — that's just the name your browser gives for it. Browsers are free to implement the file upload control however they like. In Safari, for example, it's called "Choose File" and it's on the opposite side of whatever you're probably using.

You can implement a custom look for the upload control using the technique outlined on QuirksMode, but that goes beyond just changing the button's text.

Replace input file with my own button in the form

You'll achieve this with couple of lines of CSS. Fiddle

input[type="file"] {    display: none;}.custom-file-upload {    border: 1px solid #ccc;    display: inline-block;    padding: 6px 12px;    cursor: pointer;}

<label for="file-upload" class="custom-file-upload">    <i class="fa fa-cloud-upload"></i> Custom Upload</label><input id="file-upload" type="file"/>

How can I customize the browse button?

You can't. You have to create your own button and trigger the actual input.

Here you can do this using jQuery. See working example.

HTML:

<input type="file" class="hidden" id="uploadFile"/>
<div class="button" id="uploadTrigger">Upload File</div>

jQuery:

$("#uploadTrigger").click(function(){
   $("#uploadFile").click();
});

CSS:

.hidden {
    display:none;
}
.button {
    border: 1px solid #333;
    padding: 10px;
    margin: 5px;
    background: #777;
    color: #fff;
    width:75px;
}

.button:hover {
    background: #333;
    cursor: pointer;
}

How to change the Browse button in Bootstrap custom file input?

override on css:

.custom-file-input:lang(en)~.custom-file-label::after {
    content: "Browse";
}

change content

Change default text in input type=file?

Each browser has it's own rendition of the control and as such you can't change either the text or the orientation of the control.

There are some "kind of" hacks you may want to try if you want an html/css solution rather than a Flash or silverlightsolution.

http://www.quirksmode.org/dom/inputfile.html

http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom

Personally, because most users stick to their browser of choice, and therefore are probably used to seeing the control in the default rendition, they'd probably get confused if they saw something different (depending on the types of users you're dealing with).

---

Related Topics