::file-selector-button CSS pseudo-element
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-button CSS pseudo-element represents the button of an <input> of type="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 id="avatar" 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" 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;
}
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 the input element.
Fallback example
HTML
html
<form>
<label for="fileUpload">Upload file</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;
}
Result
Specifications
| Specification |
|---|
| CSS Pseudo-Elements Module Level 4 # file-selector-button-pseudo |
Browser compatibility
| desktop | 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.