::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 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">Choose a profile picture:</label><br /> <input id="avatar" type="file" name="avatar" accept="image/png, image/jpeg" /> 構文
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 |
ブラウザーの互換性
Loading…