2024/05/10 (更新日:2024/07/11)

【CSS】擬似要素の「::file-selector-button」の使い方！【分かりやすい】

こんばんは！初めましての方は初めまして！
しゅーた（@chibasyuta）です！

この記事ではCSSの擬似要素の「::file-selector-button」の使い方について解説します。

「::file-selector-button」って何？？

このような方が対象です。

この記事の内容！

また、下の動画でも擬似要素の「::file-selector-button」の使い方について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それでは内容へ入ります！

擬似要素の「::file-selector-button」を使うと何ができるのか？

擬似要素の「::file-selector-button」を使うと、「ファイルを受け付けるボタン」にスタイルを当てることができます。

ふむふむ。

擬似要素の基本的な使い方について！

「擬似要素の基本的な使い方」については下記の記事で丁寧に解説しています。もし「擬似要素の基本的な使い方」について知りたい方は下記の記事をお読みください！

【CSS】「擬似要素」とは何か？基本的な使い方を丁寧に解説！【分かりやすい】

ボタンのスタイリングができる

実は input[type=”file”] というセレクターだとこの「ファイルを受け付けるボタン」のスタイルを変更することはできないんですよね。

変更できるのは「選択されていません」の箇所だけなんです。そこで、

「このボタン、、ダサい！！！！」

このように思った方はいませんか？？

思いますよね、、。

そこで使われる手段としては、擬似要素の「::before」などを使って無理やりボタンのスタイルを整える、というのがあります。

「でも、もっと手軽にスタイリングしたい、、。」

このようにも思いますよね！

そんなときは、この記事で扱う「::file-selector-button」を使えばOKです！

ということで、使い方の解説をしていきます！！！！

使い方はシンプル

::file-selector-button {
    background-color: purple;
    color: white;
    border: none;
    border-radius: 0;
    padding: 10px;
}

使い方はとても簡単です！このように普通に「::file-selector-button」とセレクターを書いてあげて、あとは自由にスタイリングするだけ！！

これは便利だね！！

::file-selector-button:hover {
    background-color: blue;
}

このように書くと、なぜか「:hover」が使えました。

擬似要素に擬似クラスを設定するのは、できないはず？？だと思うのですが、「::file-selector-button:hover」は使えるようですね。

大学生が夏休みにweb制作で13万円稼ぐまでにやったこと。【経験談】

擬似要素の「::file-selector-button」を使うと、「ファイルを受け付けるボタン」にスタイルを当てることができる。

実は「ファイルを受け付けるボタン」には、 input[type=”file”] ではスタイルを当てることができない。

こんな感じですかね！

この記事が気に入った方は僕のTwitter（@chibasyuta）のフォローもお願いします！

それではこんな感じでこの記事を終わります！

ではまた！