并非所有浏览器都支持文件上传按钮

Question

I have created a file upload with search button at the right side. This one is showing correctly in chrome only, but I need this to support all modern browsers. I have tried in Mozilla where this is not being supported. Can anybody please help me to solve this. Thank You.

 @import url(https://fonts.googleapis.com/css?family=Roboto); *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html { font-size: 16px } body { background-color: #fff; margin: 0; padding: 0; font-family: 'Roboto', sans-serif; font-size: 1rem; } .container { margin: 20px auto; max-width: 1140px; padding: 25px 25px; border: 1px solid #000; } .row { clear: both; } #myInput { width: 85%; border: 1px solid #000; display: inline-block; } input[type=file]::-webkit-file-upload-button { width: 0; padding: 0; margin: 0; -webkit-appearance: none; border: none; border: 0px; } x::-webkit-file-upload-button, input[type=file]:after { -webkit-appearance: button; border-collapse: separate; border-radius: 7px; -webkit-border-radius: 7px; -moz-border-radius: 7px; content: 'Search'; color: #080708; background: #e3e3e3; text-decoration: none; display: inline-block; left: 100%; margin-left: 50px; position: relative; padding: 10px 46px 10px 40px; } @media only screen and (max-width: 767px) { .container { width: 100%; padding: 15px; } #myInput { width: 64%; } .btn-View { width: 10%; } table td { padding: 12px; } } 

 <div class="container"> <div class="row"> <input type="file" name="myInput" id="myInput"> </div> </div> 

Answer 1

You can make it work in many ways.

1. The simple way if you do not need the file name to be seen, using the input file along with the label is the quickest way.
   

   • https://codepen.io/anupkumarmaharjan/pen/mWXbVj

2. Using the javascript can be handy. Go through these links for better understandings.

   • https://codepen.io/anupkumarmaharjan/pen/NpyKPm

   • https://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way