htmlの<input type=”file”>でアップロードする場合にファイルを設定していないとき

「ファイルが選択されていません。」
というメッセージが表示さえますがこの表現を変更する方法を教えてください

No.1 ベストアンサー 回答者： fujillin 回答日時： 2025/01/25 16:56

こんにちは

<input type=”file”>要素の表示制御はかなり特殊なものなので、appearance: none; やplaceholder等を設定しても無効になるようです。
ですので、簡単に制御できる方法があるのかどうかわかりません。


代替案になりますが・・
ご質問の表示を消すだけなら、要素の幅を制御することで比較的簡単にできますが、代替の文字列等を自前で表示させる必要があります。

例えば、Chromeの場合であれば
<input type="file" accept="image/*" style="width: 8em;">
<span>選択してちょ‼<span>

などとしておくことで、代替文字を表示させることは可能です。
（選択された場合には、display:none; などにして消す必要がありますが）

ただし、ブラウザによってボタンの表示文字数も異なるので、スクリプト等でuserAgentを参照するなどして、幅の指定を変える必要がありそうです。
手元にあるブラウザで試したところ、
Chromeは8em、fxは4em で丁度消えるようです。
EdgeはChromeと同じかと思ったら、8.2em程度必要なようですね。

この回答へのお礼

ありがとうございます
簡単そうとおもったのですが大変なのですね
諦めたほうがいいかもしれませんね

お礼日時：2025/01/25 17:15