::file-selector-button
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2021年4月以降、すべてのブラウザーで利用可能です。
::file-selector-button は CSS の擬似要素で、<input> 要素の type="file" のボタンを表します。
試してみましょう
input {
margin-top: 1rem;
}
input::file-selector-button {
font-weight: bold;
color: dodgerblue;
padding: 0.5em;
border: thin solid grey;
border-radius: 3px;
}
<label for="avatar">プロフィール画像を選択:</label><br />
<input id="avatar" type="file" name="avatar" accept="image/png, image/jpeg" />
構文
css
::file-selector-button {
/* ... */
}
例
基本的な例
HTML
html
<form>
<label for="fileUpload">ファイルをアップロードしてください</label>
<input type="file" id="fileUpload" />
</form>
CSS
css
input[type="file"]::file-selector-button {
border: 2px solid #6c5ce7;
padding: 0.2em 0.4em;
border-radius: 0.2em;
background-color: #a29bfe;
transition: 1s;
}
input[type="file"]::file-selector-button:hover {
background-color: #81ecec;
border: 2px solid #00cec9;
}
結果
::file-selector-button は要素全体であり、UA スタイルシートのルールと一致することを覚えておいてください。 特に、フォントや色は必ずしも input 要素から継承されるとは限りません。
代替の例
HTML
html
<form>
<label for="fileUpload">ファイルをアップロードしてください</label>
<input type="file" id="fileUpload" />
</form>
CSS
css
input[type="file"]::file-selector-button {
border: 2px solid #6c5ce7;
padding: 0.2em 0.4em;
border-radius: 0.2em;
background-color: #a29bfe;
transition: 1s;
}
input[type="file"]::-ms-browse:hover {
background-color: #81ecec;
border: 2px solid #00cec9;
}
input[type="file"]::-webkit-file-upload-button:hover {
background-color: #81ecec;
border: 2px solid #00cec9;
}
input[type="file"]::file-selector-button:hover {
background-color: #81ecec;
border: 2px solid #00cec9;
}
例
仕様書
| 仕様書 |
|---|
| CSS Pseudo-Elements Module Level 4 # file-selector-button-pseudo |