ファイルのアップロードボタンは、すべてのブラウザでサポートされていません

Question

右側に検索ボタン付きのファイルアップロードを作成しました。これはクロムのみで正しく表示されていますが、私はすべての最新のブラウザをサポートするために必要です。私はこれがサポートされていない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. ラベルと一緒に 入力ファイルを使用して、見られるように、ファイル名を必要としない場合の簡単な方法は、最も簡単な方法です。 JavaScriptを使用して
   

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

2. 便利です。より良い理解のために、これらのリンクを参照してください。あなたはこれらのプロパティは、唯一のWebKitブラウザで動作としてカスタム1を作成する必要があり

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

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