1. ホーム
  2. html

[解決済み] input type="file "ボタンのスタイリング

2022-03-17 11:36:08

質問

入力欄のスタイル type="file" ボタンをクリックします。

<input type="file" />

解決方法は?

ファイル入力のスタイリングは、ほとんどのブラウザがCSSとjavascriptのどちらからも見た目を変更できないため、非常に困難です。

入力の大きさなどでも反応しない。

<input type="file" style="width:200px">

その代わり、size属性を使用する必要があります。

<input type="file" size="60" />

これより洗練されたスタイル(例えばブラウズボタンの外観を変えるなど)については、ネイティブのファイル入力の上にスタイル付きのボタンと入力ボックスを重ねるという巧妙な方法を見る必要があります。rm がすでに言及した記事で www.quirksmode.org/dom/inputfile.html は、私が見た中で最も良いものです。

アップデイト

をスタイルするのは難しいですが <input> タグを直接使用することはできません。 <label> タグを使用します。以下の@JoshCrozierの回答を参照してください。 https://stackoverflow.com/a/25825731/10128619