1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

input[type="file"]の「ファイルを選択する」ボタンだけ非表示にするCSS

Posted at

input[type="file"]にスタイルをつける方法は色々と紹介されていますが、「ファイルを選択する」ボタンだけを非表示にする方法です。
未選択時のテキストと選択後のファイル名のテキストは残ります。

input[type="file"]::file-selector-button {
    appearance: none;
    visibility: hidden;
    margin: 0;
    padding: 0;
    border: 0 none;
    width: 0;
    height: 0;
    font-size: 100%;
    line-height: inherit;
}

display: none;で済ませられるかと思いましたが、Safariだけファイル名のテキストを巻き込んで消えてしまったため、個別のプロパティで片っ端からサイズを0にしています。

また、font-sizeやline-heightがファイル名のテキストの位置に影響するため、それぞれを親(input[type="file"])から継承するような記述をしています。

この辺、ブラウザの開発ツールで要素を選択するとShadow DOMになっていたり、それだけでは説明できないバグっぽい挙動があったりしてスタイル付けが難しいです。

今回はできるだけ、今後ブラウザ側の変更があっても成立しそうなスタイルで対応しました。

ちなみにファイル名のテキスト部分へのスタイルはinput[type="file"]で指定します。
未選択時のテキストも色などは同様ですが、::placeholderinput:placeholder-shownは効かないので未選択時のテキストを制御したい場合は別の要素でUIを作って見た目をあてることになります。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?