👌

input[type="file"]のボタンを装飾する

に公開
CSS
tech
<input type="file">

input[type="file"]::file-selector-button {
    color: white;
    font-weight: bold;
    background-color: darkolivegreen;
    border-radius: 5px;
}

イメージ

解説

::file-selector-button という疑似要素に対して装飾を行えば良いです。

ただし、疑似要素であるため、例えば他のボタンと同じクラスを指定して共通レイアウトを適用するといった事が出来ず不便です。

そのような場合は、素直に button でボタンを作成し、クリック時のイベントで対象の input を発火させてあげる方が良さそうです。

以下の記事に上記の方法と、装飾のアンチパターンについて詳しく書かれています。

https://zenn.dev/dqn/articles/7505cfa1bed278

Discussion