How to Style "Input File" With Css3/JavaScript

Styling the input type file with CSS and a little JS, is this ok?

This functionality is not available in the browsers due to security reasons.

Checkout this explanation: https://stackoverflow.com/a/15201258/586051

Only Firefox browser allows it. Refer the following example in Firefox.

EDIT: You can get the file name of the selected file this way:

EDIT2: The following code snippet demonstrates the styling of file upload button. Here we are actually faking it but the end user wouldnt know about it. ;)

EDIT3: Added value of fullPath in the comment.

EDIT4: Added <div> wrapper in HTML

document.getElementById("customButton").addEventListener("click", function(){  document.getElementById("fileUpload").click();  // trigger the click of actual file upload button});
document.getElementById("fileUpload").addEventListener("change", function(){ var fullPath = this.value; // fetched value = C:\fakepath\fileName.extension var fileName = fullPath.split(/(\\|\/)/g).pop(); // fetch the file name document.getElementById("fileName").innerHTML = fileName; // display the file name}, false);
#fileUpload{  display: none; /* do not display the actual file upload button */}
#customButton{ /* style the fake upload button */ background: yellow; border: 1px solid red;}
<div>  <input type="file" id="fileUpload"> <!-- actual file upload button -->  <button id="customButton">My Custom Button</button>  <!-- fake file upload button which can be used for styling ;) -->  <span id="fileName"></span></div>

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

Styling an input type=file

I think I found two solutions to your problem. You are using: filter:alpha(opacity: 0)
on your .file class, thus hiding the actual "Browse..." button you usually see in upload controls.

The first solution would be to use a conditional to set the CSS that will replace your fancy "Select" image with the normal yet styled "Browse" button when the user is using IE.

The second one would be to play with the size of the FileAttachment input and so the hidden "Browse..." button would fit in the position of the "Select" image. From there you just have to make sure that the z-index property of the button is higher than the one of the image.

Let me know if these solutions solve your needs.

:D

Styling input type=file

The CSS way (base code found here):

<html>
<style type="text/css">
div.fileinputs {
position: relative;
}

div.fakefile {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}

div.fakefile input[type=button] {
/* enough width to completely overlap the real hidden file control */
cursor: pointer;
width: 148px;
}

div.fileinputs input.file {
position: relative;
text-align: right;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
}
</style>

<div class="fileinputs">
<input type="file" class="file" />

<div class="fakefile">
<input type="button" value="Select file" />
</div>
</div>
</html>

How to style a input type=file in html?

LIVE DEMO

<button id="imageDrop" onclick="document.getElementById('uploadImage').click()" title="Click or Drag Image">Upload image</button>

<input id="uploadImage" type="file" />



#imageDrop{      
background:#fff;
width:300px;
height:180px;
font-size:20px;
font-style:italic;
border-radius:18px;
border:2px dashed #444;
}

#uploadImage{
visibility: hidden;
height:0px;
width: 0px;
}

How do I style a File Upload button

You can try the below code

$('input[type="file"]').on('change', function() {  $('input[type="text"]').val($(this).val());});$('span').on('click', function() {  $('input[type="text"]').val($('input[type="file"]').val());});
form.uploadButton {  position: relative;  display: flex;}
input[type="text"] { width: 200px; height: 40px; box-sizing: border-box; border-radius: 2px; border: 1px solid #ccc; margin-right: 5px;}
span { background: red; border: 0; color: #fff; padding: 0 20px; width: 80px; text-align: center; line-height: 40px; cursor: pointer;}
input[type="file"] { position: absolute; top: 0; bottom: 0; left: 0; right: 0; opacity: 0; cursor: pointer; width: 100%;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><form class="uploadButton" method="" action="" enctype="multipart/form-data">  <input type="text">  <span>Browse</span>  <input type="file" name="file[]" multiple></form>

CSS design a input field type=file

Here's the html:

<span class="filewrap">
Some funny german words I don't understand
<input type="file"/>
</span>

and here's the CSS:

.filewrap{
position:relative;
background:#000;
border:1px solid #cc0000;
padding:15px 100px;
color:#fff;
font-family:sans-serif;
font-size:12px;
}

input[type="file"]{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
opacity:0;
cursor:pointer;
}

See this demo fiddle

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



Leave a reply



Submit