customizing a file button using css - html

Question

I tried customizing a file upload button using css.
<label class="custom-file-input">
<input type="file" name="file" id="videofile" /> <!--class="dropzone"-->
</label>
Full Code in jsfiddle. https://jsfiddle.net/2e7dLvoy/
How can i show the file name that is choosen just like a normal file upload button?

Answer 1

Use this
HTML:
<div class="form-group upload_btn">
<div class="fileUpload pull-left">
<span>Browse</span>
<input type="file" class="upload " id="uploadBtn">
</div>
<input disabled="disabled" class="input pull-left" placeholder="Upload your resume" id="uploadFile">
</div>
Css:
.form-group.upload_btn {
overflow: hidden;
margin-bottom: 20px;
}
.fileUpload {
background: #e1e1e1 none repeat scroll 0 0;
color: #626262;
display: inline-block;
font-size: 18px;
font-weight: 300;
overflow: hidden;
padding: 5.5px 10px;
position: relative;
}
.pull-left {
float: left;
}
.fileUpload input.upload {
cursor: pointer;
font-size: 20px;
left: 0;
margin: 0;
opacity: 0;
padding: 0;
position: absolute;
top: 0;
}
.upload_btn .input {
width: 79%;
}
.input {
border: 0px;
padding: 8px;
box-shadow: none;
background-color: #fff;
}
Js:
document.getElementById("uploadBtn").onchange = function () {
document.getElementById("uploadFile").value = this.value;
};
Here is the jsfiddle link

Answer 2

try this:
fiddle with jquery: https://jsfiddle.net/2e7dLvoy/4/
HTML
<label class="custom-file-input">
<input type="file" name="file" id="videofile" /> <!--class="dropzone"-->
<p id="selectedFile"></p>
</label>
CSS
.custom-file-input {
display: inline-block;
position: relative;
color: #533e00;
}
.custom-file-input input {
visibility: hidden;
width: 100px
}
.custom-file-input:before {
content: 'Drag & Drop';
display: block;
background: -webkit-linear-gradient( -180deg, #ffdc73, #febf01);
background: -o-linear-gradient( -180deg, #ffdc73, #febf01);
background: -moz-linear-gradient( -180deg, #ffdc73, #febf01);
background: linear-gradient( -180deg, #ffdc73, #febf01);
border: 3px solid #dca602;
border-radius: 10px;
padding: 5px 0px;
outline: none;
white-space: nowrap;
cursor: pointer;
text-shadow: 1px 1px rgba(255,255,255,0.7);
font-weight: bold;
text-align: center;
font-size: 10pt;
position: absolute;
left: 0;
font-size: 12px;
}
.custom-file-input:hover:before {
border-color: #febf01;
}
.custom-file-input:active:before {
background: #febf01;
}
p {
float: left;
margin: -5% 14% 0% 32%;
}
jQuery
$('input[type=file]').change(function(e){
$in=$(this);
$('#selectedFile').html($in.val());
});