JavaScriptを使用せずにファイルのアップロードボタンをスタイルする

Question

クライアントは、JavaScriptが使用されないようにするWebサイトで作業しています。次のコードを使用して、自分のウェブサイトのファイル更新ボタンのスタイルを整えました。ファイルが選択されると

.btn-file { 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 
.btn-file input[type=file] { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    min-width: 100%; 
 
    min-height: 100%; 
 
    font-size: 100px; 
 
    text-align: right; 
 
    filter: alpha(opacity=0); 
 
    opacity: 0; 
 
    outline: none; 
 
    background: white; 
 
    cursor: inherit; 
 
    display: block; 
 
}

<label class="btn btn-default btn-file"> 
 
    Browse 
 
    <input type="file" style="display: none;"> 
 
</label>

はしかし、JavaScriptを使用しなくても、私は以下の例のようにボタンの横にファイル名を表示することはできません。

任意の提案は、ブラウザ、従来のアップロードボタンを使ってこれを行うには？ブラウズボタン用のzインデックスを設定することにより

Answer 1

あなたが試すことができます：

.btn-file { 
 
    position: absolute; 
 
    text-align: center; 
 
    overflow: hidden; 
 
    border-radius: 5px; 
 
    z-index: 2; 
 
    min-width: 84px; 
 
    min-height: 35px; 
 
    background-color: white; 
 
    border: 3px solid cyan; 
 
    top: 0; 
 
    left: 1; 
 
} 
 
input[type=file] { 
 
    float: left; 
 
    position: relative; 
 
    background: white; 
 
    cursor: pointer; 
 
    background-color: white; 
 
}

<label class="btn btn-default "> 
 
    <span class="btn-file">Browse</span> 
 
    <input type="file"> 
 
</label>

OR

を他の方法は、ブートストラップを使用することです：

https://jsfiddle.net/wesfe5jy/3/