Few days back I have tried to change the look of input type file but unable to change like background,border etc. Actually, it looks different in all browsers.<\/p>\n
Now I found a solution to do this.<\/p>\n
Here is the HTML which have been used:-<\/strong><\/p>\n [java] At first I have taken an outer div with name \u201cuploadOuter\u201d, then inserted an input type: text field showing the path of files selected locally. Afterwards, I have placed input type file which placed over the input type:text. Also I had set the opacity:None. For IMG Preview purpose I have taken ‘Preview’ div.<\/p>\n By using jQuery I have showcased the path of the selected file into the input type text and image Preview.<\/p>\n Here is the CSS which have been used:-<\/strong><\/p>\n [java] Here is the jQuery which have been used:-<\/strong><\/p>\n [java] Few days back I have tried to change the look of input type file but unable to change like background,border etc. Actually, it looks different in all browsers. Now I found a solution to do this. Here is the HTML which have been used:- [java] <div class="uploadOuter"> <input type="text" class="uploadText"\/> <input type="file" class="uploadFile"\/> <\/div> <div […]<\/p>\n","protected":false},"author":228,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":0},"categories":[1],"tags":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/32588"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/228"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=32588"}],"version-history":[{"count":0,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/32588\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=32588"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=32588"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=32588"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\n<div class="uploadOuter">
\n <input type="text" class="uploadText"\/>
\n <input type="file" class="uploadFile"\/>
\n <\/div>
\n\t\t<div class="Preview">
\n\t\t<img src="" alt=""\/>
\n\t\t<span class="loader"><\/span>
\n\t\t<\/div>
\n[\/java]<\/p>\n
\n*{box-sizing:border-box;}
\n .uploadOuter {margin: 6px 0;min-height:30px;border:1px solid #ccc;position: relative;width: 310px;}
\n .uploadFile {opacity: 0;position: absolute;right: 0;top: 0;z-index: 2;height:100%; width: 100%;}
\n .uploadText{width:100%;height:100%;position:absolute;border:none;padding:0 0 0 10px;background: url(‘imagePathOfBrowseButton’) no-repeat right center}
\n\t\t\t.Preview{width:200px;border:1px solid #ccc;position:relative;display:none}
\n\t\t\t.Preview img{width:100%;}
\n\t\t\t.loader{position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.5) url(‘imagePath’) no-repeat center center;z-index:99; }
\n[\/java]<\/p>\n
\n$(function(){
\n\t\t\t\t$(‘.uploadFile’).change(function(e){
\n\t\t\t\t$(‘.loader’).show();
\n\t\t\t\t$(‘.Preview’).show();
\n\t\t\t\t\tvar filePath = URL.createObjectURL(e.target.files[0]);
\n\t\t\t\t\tvar fileName = e.target.files[0].name;
\n\t\t\t\t\t\/\/var fileName = $(this).val();
\n\t\t\t\t\t$(‘.uploadText’).val(fileName);
\n\t\t\t\t\t$(‘.Preview img’).attr(‘src’,filePath);
\n\t\t\t\t\t$(‘img’).load(function(){
\n\t\t\t\t\t$(‘.loader’).hide();
\n\t\t\t\t\t})
\n\t\t\t\t});
\n\t\t\t});
\n[\/java]<\/p>\n","protected":false},"excerpt":{"rendered":"