::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.
The::file-selector-buttonCSSpseudo-element represents the button of an<input> oftype="file".
Try it
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 type="file" name="avatar" accept="image/png, image/jpeg" />Syntax
css
::file-selector-button { /* ... */}Examples
Basic example
HTML
html
<form> <label for="fileUpload">Upload file</label> <input type="file" /></form>CSS
form { display: flex; gap: 1em; align-items: center;}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;}Result
Note that::file-selector-button is a whole element, and as such matches the rules from the UA stylesheet. In particular, fonts and colors won't necessarily inherit from theinput element.
Fallback example
HTML
html
<form> <label for="fileUpload">Upload file</label> <input type="file" /></form>CSS
form { display: flex; gap: 1em; align-items: center;}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;}Result
Specifications
| Specification |
|---|
| CSS Pseudo-Elements Module Level 4 # file-selector-button-pseudo |
Browser compatibility
Loading…