試したことがある人ならわかると思いますが、純粋な CSS スタイルと HTML を使用して統一されたアップロード ファイル ボタンを実装するのは面倒な場合があります。以下のさまざまなブラウザのスクリーンショットをご覧ください。見た目が大きく異なっているのは明らかです。
私たちの目標は、すべてのブラウザで同じ外観とレイアウトを持つ、純粋な CSS で実装されたシンプルなファイルのアップロード ボタンを作成することです。これを行うことができます:
ステップ 1. 単純な HTML タグを作成します
1
2
3
4
< div class = "fileUpload btn btn-primary" &g
<スパン > アップロード
1
2 3
4
5
6
7
8
9
10
11
12
13
14
15
16
.fileUpload {
位置 : 相対 ;
オーバーフロー : 非表示 ;
マージン : 10px ;
.fileUpload input.upロード { 位置: 絶対
トップ: 0;
右: 0;パディング: 0;
カーソル: ポインター;
不透明度: 0; ;
}
簡単にするために、BootstrapCSS スタイルが適用されたボタン (div.file-upload) を使用します。
デモ:
選択したファイルを表示するアップロードボタン
残念ながら、純粋な CSS ではこれを行うことができません。ただし、選択したファイルを実際に表示したい場合は、次の JavaScript スニペットが役に立ちます。
JavaScript:
1
2 3
document.getElementById( "uploadBtn" ).onchange = function () {
document.getElementByI d( "uploadFile" ).value = この .value ;
};
1
2
3
4
5
< 入力 ID = "uploadFile" プレースホルダー = "ファイルを選択" 無効 = "無効" />
< div class = "fileUpload btn btn-primary" > < spa >Upload>< input id = "uploadBtn" type = "file" class = " アップロード" />
div >
デモ: