How to customize input type=file?
You can’t modify much about the input[type=file]
control itself.
Since clicking a label
element correctly paired with an input will activate/focus it, we can use a label
to trigger the OS browse dialog.
Here is how you can do it…
label { cursor: pointer; /* Style as you please, it will become the visible UI component. */}
#upload-photo { opacity: 0; position: absolute; z-index: -1;}
<label for="upload-photo">Browse...</label><input type="file" name="photo" id="upload-photo" />
Styling an input type=file button
Styling file inputs are notoriously difficult, as most browsers will not change the appearance from either CSS or javascript.
Even the size of the input will not respond to the likes of:
<input type="file" style="width:200px">
Instead, you will need to use the size attribute:
<input type="file" size="60" />
For any styling more sophisticated than that (e.g. changing the look of the browse button) you will need to look at the tricksy approach of overlaying a styled button and input box on top of the native file input. The article already mentioned by rm at www.quirksmode.org/dom/inputfile.html is the best one I've seen.
UPDATE
Although it's difficult to style an <input>
tag directly, this is easily possible with the help of a <label>
tag. See answer below from @JoshCrozier: https://stackoverflow.com/a/25825731/10128619
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).
Styling of the input type file not working
We cannot do much customization of the file input. But you have options like below.
Note: I have used Bootstrap for some classes as your code is using it. But if you want you can have custom classes as well.
One disadvantage is that the select file information is also hidden. If you want that you can get that using JavaScript and show below the button.
input[type='file'] {
width: 0;
height: 0;
overflow: hidden;
opacity: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<label>
<input id="Image" type="file" class="form-control-image" name="image_reference">
<span class="btn btn-primary">File button</span>
</label>
<br />
<br />
<button class="btn btn-primary form-control-image">Submit</button>
Style input type file in modern browsers
As I said in the comments section, you'll need a label
tag, along with some CSS
, to do the trick. Indeed, you'll need JavaScript
to bring life to your UI
.
So, here I'm making a demo for you :
const inputFile = document.querySelector('.my-file'), label = document.querySelector('.custom-input'), icon = label.querySelector('.label-icon'), text = label.querySelector('.label-text');inputFile.addEventListener('change', () => { text.textContent = 'Please, choose a file.'; if (inputFile.files.length === 1) { text.textContent = inputFile.files[0].name.toUpperCase(); text.classList.add('attached'); icon.classList.add('attached'); } else { text.classList.remove('attached'); icon.classList.remove('attached'); }});
.container { padding: 12px 6px; background-color: #f6f6f6;}
.wrapper { display: flex; justify-content: flex-start; align-items: stretch; border: 1px solid #dedede; border-radius: 6px; overflow: hidden;}
.wrapper .my-file { display: none;}
.wrapper .custom-input { background-color: #fff; flex: 1; cursor: pointer;}
.wrapper .custom-input .label-icon { display: inline-block; padding: 15px; background-color: #fde4af; color: #181818; transition: all .4s 0s ease;}
.wrapper .custom-input .label-icon.attached { background-color: #e6ac2d; color: #fff;}
.wrapper .custom-input .label-icon.attached > .fa { text-shadow: 0 0 15px rgba(24, 24, 24, .35);}
.wrapper .custom-input .label-text { display: inline-block; padding: 4px; transition: all .4s 0s ease;}
.wrapper .custom-input .label-text.attached { font-weight: 600;}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" /><div class="container"> <form action="#" id="my-form"> <div class="wrapper"> <input type="file" id="my-file" name="my-file" class="my-file" /> <label for="my-file" class="custom-input"> <span class="label-icon"> <i class="fa fa-folder"></i> </span> <span class="label-text">Please, choose a file.</span> </label> </div> </form></div>
Get file name when css is applied to input[type=file]
Following this Answer, you can get the file name, and use innerHTML
to show it to user.
document.getElementById('test').addEventListener("change", function() {
var fullPath = document.getElementById('test').value;
if (fullPath) {
var startIndex = (fullPath.indexOf('\\') >= 0 ? fullPath.lastIndexOf('\\') : fullPath.lastIndexOf('/'));
var filename = fullPath.substring(startIndex);
if (filename.indexOf('\\') === 0 || filename.indexOf('/') === 0) {
filename = filename.substring(1);
}
document.getElementById("test2").innerHTML = filename;;
}
});
.submit {
width: 140px;
height: 40px;
background-color: red;
color: #fff;
text-align: center;
padding: 10px;
line-height: 40px;
cursor: pointer;
}
<input type="file" id="test" style="display:none;">
<label for="test">
<span class="submit">submit</span>
<span id="test2">filename</span>
</label>
Related Topics
Inputting a Default Image in Case the Src Attribute of an HTML ≪Img≫ Is Not Valid
Freeze the Top Row For an HTML Table Only (Fixed Table Header Scrolling)
Target="_Blank" Vs. Target="_New"
Should I Use Px or Rem Value Units in My Css
Absolute Urls Omitting the Protocol (Scheme) in Order to Preserve the One of the Current Page
Change Bullets Color of an HTML List Without Using Span
Two Forward Slashes in a Url/Src/Href Attribute
Properly Sizing and Aligning the Flex Item(S) on the Last Row
How to Position One Image on Top of Another in Html
Changing Image on Hover With Css/Html
Set Textview Text from Html-Formatted String Resource in Xml
Google Chrome Form Autofill and Its Yellow Background
Default Select Option as Blank
Using Position Relative/Absolute Within a Td