::file-selector-button疑似要素の登場によりinput type=”file”のデザインの変更にJavascriptが必要なくなりました。
当記事では、CSSのみでinput type=”file”の見た目を変更する方法について記します。
少し厄介なボタンテキストの変更についても解説します。
目次
::file-selector-buttonとは
::file-selector-buttonはinput type=”file”のボタンデザインを直接変更できる疑似要素です。
<style>
.file-input::file-selector-button {
color: blue;
}
</style>
<input type="file" class="file-input">
この疑似要素が登場する前、input type=”file”を装飾するためにはHTMLを工夫して、JSを使い、疑似的にファイル選択ボタンを作成する必要がありましたが、もうその必要がなくなりました！すばらしい。
::file-selector-buttonのブラウザ対応状況
::file-selector-button疑似要素はすでにモダンブラウザで対応されているようです。
参考：::file-selector-button” | Can I use…
input type=”file”のデザインサンプル
もちろん、::file-selector-buttonを使用して枠線や背景色を変更することもできます。
サンプルを載せておきます。
<style>
.file-input::file-selector-button {
border: 2px solid blue;
color: blue;
padding: 5px 10px;
border-radius: 5px;
font-size: 18px;
display: block;
}
</style>
<input type="file" class="file-input">ボタンとテキストの間の改行
改行するには::file-selector-button疑似要素にdisplay: blockを追加します。
Chromeなどで右側に見えない空白ができるのでwidthも指定しておきましょう。
<style>
.file-input {
width: 160px; /* 追加 */
}
.file-input::file-selector-button {
border: 2px solid blue;
color: blue;
padding: 5px 10px;
border-radius: 5px;
font-size: 18px;
width: 100%; /* 追加 */
display: block; /* 追加 */
}
</style>
<input type="file" class="file-input">ホバー時のスタイルを指定する
::file-selector-button疑似要素には:hover疑似クラスを適用する事ができます。
.file-input::file-selector-button:hover {
background-color: blue;
color: #fff;
}ソースコード全文
ここまでのソースコード全文を載せておきます。
※一番下にinput type=”file”のテキストを変更する方法も載せているので、興味がある方はぜひ！
<style>
.file-input {
width: 160px;
}
.file-input::file-selector-button {
border: 2px solid blue;
color: blue;
padding: 5px 10px;
border-radius: 5px;
font-size: 18px;
width: 100%;
display: block;
}
.file-input::file-selector-button:hover {
background-color: blue;
color: #fff;
}
</style>
<input type="file" class="file-input">発展：input type=”file”のテキストを変更
::file-selector-button疑似要素の一つだけ残念な事として、ボタンのテキストが変更できないという点があります（2023年12月11日時点）。
とはいっても、HTMLとCSSを工夫すればできないことはありません。
<style>
.file-input {
display: inline-block;
position: relative;
width: 200px;
--font-size: 18px;
--padding: 5px 10px;
}
.file-input input[type=file] {
width: 100%;
}
.file-input input[type=file]::file-selector-button {
display: block;
opacity: 0;
margin-bottom: 5px;
font-size: var(--font-size);
padding: var(--padding);
}
.file-input::before {
font-size: var(--font-size);
padding: var(--padding);
content: "ファイル選択してね";
border-radius: 5px;
background: #fff;
border: 2px solid blue;
color: blue;
text-align: center;
box-sizing: border-box;
width: 100%;
position: absolute;
}
</style>
<label class="file-input">
<input type="file">
</label>以上、CSSのみでinput type=”file”の見た目を変更する方法でした！
