fileuploadの画像反映部分は残してデザインを変更したい

Question

fileuploadのファイルを選択のところだけ消してfileupload時にでる右のファイル名は残したいのですが一緒に消えてしまいます。全部消してファイル名の表示を新たに書き加えるしか方法ないでしょうか？またその場合、おすすめのコンポーネントなどあるでしょうか？

Comments

[x_x]

ブラウザにより異なる表示をすると思うのですが、ブラウザは何を想定しているでしょうか？

[you88]

chrome,safariを想定しています。

[m.ts10806]

差支えなければ結局どのように解決したか回答にコメントいただければと。 https://teratail.com/help/question-tips#questionTips4-2

[you88]

承知しました！コメントに実装した内容を返答させてもらいました！

Answer 1

基本ムリです。
file要素は「ボタン」と「テキスト」にわかれているわけではなく、２つで1つです。
もしやるならlabel要素とくっつけてhiddenにして装飾してそれっぽくするくらいでしょう。

[HTML5] <input type="file">のデザインをもっと簡単に変更

上記はボタンですが、テキスト入力っぽく装飾しておけば可能かなと。

ただ、先に書いたように２つで1つなので文字に見えてファイル情報を保持していたりします(正しい表現ではないですがイメージで)

そのファイルパスが表示される部分だけ残して何がしたいのかを書いておくともう少し具体的なアドバイスが得られると思います。

Comments

[you88]

ありがとうございます！
２つとも消してlabelで装飾する方法で実装しました！

[m.ts10806]

確かにそうなんですが後から同じような要件を実現したい人が見たときに参考になる情報があった方が良いと思うので、簡単なコードとか具体的なものを以て解決コメントとしていただけると…