select styling

by narensrinivasans

HTML

<input type="file" id="file" />
<label for="file">Choose a file</label>

CSS

input#file {
    display: none;
}

label[for="file"] {
    background:linear-gradient(#eee,#ddd);
    border:1px solid #ccc;
    border-radius:2px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
    color:#666;
    cursor:pointer;
    display:block;
    margin:20px auto;
    padding:7px;
    width:200px;
}

JavaScript

document.querySelector('input').onchange = function(){
  	document.querySelector('label').innerHTML = this.value;
};