純粋な HTML と CSS_html/css_WEB-ITnose を使用して、デフォルトのアップロード ファイル ボタン スタイルを変更する方法

試したことがある人ならわかると思いますが、純粋な 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 = " アップロード" />

デモ: