並非所有瀏覽器都支持文件上傳按鈕

Question

我已經創建了帶有搜索按鈕的文件上傳右側。 該瀏覽器僅在chrome中正確顯示，但是我需要它來支持所有現代瀏覽器。 我曾在不支持此功能的Mozilla中嘗試過。 誰能幫我解決這個問題。 謝謝。

 @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

您可以通過多種方式使其工作。

1. 如果不需要顯示文件名，最簡單的方法是將輸入文件與標簽一起使用是最快的方法。
   

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

2. 使用javascript會很方便。 通過這些鏈接可以更好地理解。

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

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