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"]
で指定します。
未選択時のテキストも色などは同様ですが、::placeholder
やinput:placeholder-shown
は効かないので未選択時のテキストを制御したい場合は別の要素でUIを作って見た目をあてることになります。