::file-selector-button
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.
::file-selector-button
は CSS の擬似要素で、<input>
要素の type="file"
のボタンを表します。
試してみましょう
構文
css
selector::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;
}
例
仕様書
Specification |
---|
CSS Pseudo-Elements Module Level 4 # file-selector-button-pseudo |
ブラウザーの互換性
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
::file-selector-button |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Uses a non-standard name.
- Has more compatibility info.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.