Styling No file selected in input type file
2 answers
.left {
float: left;
}
.both {
clear: both;
}
.file-upload-container {
width:400px;
border: 1px solid #efefef;
padding:10px;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
background: #fbfbfa;
}
.file-upload-override-button {
position: relative;
overflow: hidden;
cursor: pointer;
background-color:#79bbff;
}
.file-upload-override-button:hover {
background-color:#378de5;
}
.file-upload-override-button:active {
position:relative; top:1px;
}
.file-upload-button {
position: absolute;
height: 50px;
top: -10px;
left: -10px;
cursor: pointer;
opacity: 0;
filter:alpha(opacity=0);
}
.file-upload-filename {
margin-top: 10px;
height: auto;
clear:both;
float:left
}
<div class="file-upload-container">
<div class="file-upload-override-button left">
Choose file
<input type="file" class="file-upload-button" id="file-upload-button"/>
</div>
<div class="file-upload-filename left" id="file-upload-filename">No file selected</div>
<div class="both"></div>
</div>
+2
source to share
window.pressed = function(){
var a = document.getElementById('aa');
if(a.value == "")
{
fileLabel.innerHTML = "No File Selected";
}
else
{
var theSplit = a.value.split('\\');
fileLabel.innerHTML = theSplit[theSplit.length-1];
}
};
input[type=file]{
width:90px;
color:transparent;
}
label{
display:block;
}
<div><input type='file' title="Choose a video please" id="aa" onchange="pressed()"><label id="fileLabel">No File Selected</label></div>
+3
source to share