azukiazusa.dev
戻る
azukiazusa

azukiazusa

CSS でファイルのアップロードボタンをカスタマイズする ::file-selector-button 疑似要素

::file-selector-button 疑似要素を使用することで、<input type="file"> 要素のデフォルトのボタンのスタイルをカスタマイズできます。現在すべてのモダンブラウザでサポートされています。

azukiazusa

azukiazusa

input::file-selector-button {
  background-color: #007bff;
  color: #fff;
  border: 1px solid #007bff;
  border-radius: 5px;
  padding: 5px 10px;
}
azukiazusa

azukiazusa

::file-selector-button 疑似要素によりボタンをカスタマイズするメリットとして、ファイルドラッグアンドドロップ機能を自分で実装する必要がない点があげられます。ブラウザのデフォルトのファイルアップロードボタンには、あらかじめドラッグアンドドロップ機能が備わっているためです。

azukiazusa

azukiazusa

ただし、ボタン内部の文字列をカスタマイズすることはできません。この場合にはデフォルトのファイルアップロードボタンを非表示にして、代わりにカスタムボタンを用意する必要があるでしょう。