jackrabbit-d
10/18/2017 - 2:02 PM

Style File Input

Style input[type=file] with CSS and JS

code-file
content_copyfile_download
   $('input[type=file]').after('<span class="filename">No file selected.</span>').after('<span class="upload">Upload a File</span>').change(function(e){
        f = e.target.value;
        if(f.length > 26){
            f = f.slice(0,26) + '...'
        }
        $(this).siblings('.filename').text(f);
    });
style-file
content_copyfile_download
form .gfield input[type=file] { width: 125px; height: 35px; position: absolute; top: 0; right: 0; font-size: 20px; border: none; opacity: 0; cursor: pointer; z-index: 100; }
form .gfield input[type=file] + .upload { display: block; float: right; height: 40px; background:#85A5AE; font: 13px/40px ProximaNova; color: #fff; padding: 0 10px; text-transform: uppercase; border-radius: 3px; }
form .gfield input[type=file]:hover + .upload { background: #BDA81F; }
form .gfield input[type=file] + .upload + .filename { border: 1px solid #E1E1E1; box-shadow: inset 0px 1px 3px 0px #E1E1E1; border-radius: 3px; padding:0 13px; font:300 15px/40px ProximaNova; color:#65646A; height:40px; width:100%; display:block; }