How to style HTML file upload button with pure CSS in FireFox
I have tried many different methods for the style input[type="button"]
that is inside input[type="file"]
.
I found one method that uses clean CSS
, which allows the user to see the filename they have chosen. However, it lacks one particularly popular browser, firefox.
I've found several ways to "do" this with JS
or just simply hiding the output window for the filename.
JS references or hide methods .:
Pure CSS techniques I came across completely on chrome and then found the answer again for the input file type button style
This method CSS
works by selecting an element by class pseudo
.
In Google Chrome, this is done with:
input.formelement::-webkit-file-upload-button {background-color: #443}
Where input.formelement
is the form class for uploading the file and -webkit-file-upload-button
is a browser-specific pseudo-element.
In Internet Explorer (10+), this is done with:
input.formelement::-ms-browse {background-color: #443}
Once again, input.formelement
this is the file upload form class and -ms-browse
is a browser-specific pseudo-element.
Is there a way to do this in FireFox without Javascript?
source to share
I don't believe there is a way to do this in Firefox using just CSS.
There is also no way to style or change the "No file selected" text. This filename shortcut also looks different in different browsers.
If you really want a cross-browser solution, your best bet is still to use a fake "button" that triggers clicks on the actual hidden button. Using JS might be the obvious choice, but not the only way:
JS method :
// JS - DOM Elements
var browse_button = document.getElementById('browse-button');
var file_input = document.getElementById('file-input');
// Handler to trigger click on file input
browse_button.addEventListener('click', function(e) {
file_input.click();
});
/* CSS to hide file input */
#file-input {
display: none;
}
#browse-button {
/* TODO: styles */
}
<!-- Simple HTML -->
<input type="file" id="file-input" />
<button type="button" id="browse-button">Browse</button>
Pure HTML / CSS Method :
Simple HTML + CSS can work as well, especially if you don't need the filename tag. A quick dirty HTML + CSS solution:
* {
box-sizing: border-box;
}
input[type=file] {
position: absolute;
top:-5px; /* size of border */
left:-5px; /* size of border */
box-sizing: border-box;
margin: 0;
padding: 0;
width: 240px;
height: 50px;
border: 1px solid red;
opacity: 0; /* hide actual input */
cursor: pointer
}
.fakeFileButton {
position: relative;
margin: 0;
padding: 0;
width: 240px; /* same as button */
height: 50px; /* same as button */
background-color: rgb(50,50,238);
border: 5px solid rgb(128,128,128);
font-size: 18px;
color: rgb(255,255,255);
text-align: center;
line-height: 40px;
}
.fakeFileButton:hover {
background-color: rgb(100,150,255);
color: rgb(0,0,0);
}
<div class="fakeFileButton">
Browse File on Computer
<input type="file">
</div>
If you want to add a fake filename signature, that is also possible, but you must use JS to set up a handler to watch for events change
with a callback that reads real_input.value
and writes it to fake_label.innerHTML
.
source to share