input[type='file'] のスタイルをカスタマイズする

input[type="file"] のスタイルは、さまざまなブラウザーで異なる動作をします:

1.クローム:

---

2.Firefox:

---

3. オペラ:

---

4.ie:

---

5.エッジ:

---

さらに、input[type="file"] の高さを指定し、その行の高さをその高さと同じに設定すると、醜いスタイルが Chrome に表示されます。

---

「ファイルが選択されていません」という行が垂直方向の中央に配置されていません。

Firefox の方が見栄えが良いようです。ただし、これらのブラウザではパフォーマンスにばらつきがあるため、互換処理を行う必要があります。

アイデア:

1. ブラウザのいずれかに似たスタイルをカスタマイズし、下位レイヤーに配置します。

2. ブラウザ自体によって表示されるスタイルを「非表示」にし、opacity: 0; をクリックすると、input[type="file"] が応答するイベントになります。

3. ファイルを選択または変更した後、表示されているファイルの値を変更します。

コード:

リーリー

リーリー

リーリー

このように処理すると、さまざまなブラウザーでパフォーマンスが安定します。

1. ファイルが選択されていない場合の Chrome の場合:

2. ファイルを選択した後、Firefox で次のようにします。

---