The ::file-selector-button CSS pseudo-element represents the button of an <input> of type="file".
WebKit/Blink compatible browsers like Chrome, Opera and Safari (indicated by the -webkit prefix) support a non-standard pseudo-class ::-webkit-file-upload-button which serves the same purpose.
Syntax
selector::file-selector-button
Examples
HTML
<form>
<label for="fileUpload">Upload file</label>
<input type="file" id="fileUpload">
</form>CSS
form {
display: flex;
gap: 1em;
align-items: center;
}input[type=file]::file-selector-button {
border: 2px solid #6c5ce7;
padding: .2em .4em;
border-radius: .2em;
background-color: #a29bfe;
transition: 1s;
}
input[type=file]::file-selector-button:hover {
background-color: #81ecec;
border: 2px solid #00cec9;
}Example with fallback for browsers supporting the -webkit prefix. Note that as a selector you will need to write out the whole code block twice, as an unrecognized selector invalidates the whole list.
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.
HTML
<form>
<label for="fileUpload">Upload file</label>
<input type="file" id="fileUpload">
</form>CSS
form {
display: flex;
gap: 1em;
align-items: center;
}input[type=file]::-webkit-file-upload-button {
border: 2px solid #6c5ce7;
padding: .2em .4em;
border-radius: .2em;
background-color: #a29bfe;
transition: 1s;
}
input[type=file]::file-selector-button {
border: 2px solid #6c5ce7;
padding: .2em .4em;
border-radius: .2em;
background-color: #a29bfe;
transition: 1s;
}
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;
}Specifications
The pseudo-element has been resolved on by the CSS WG however the edit has not yet been made in a specification.
Browser compatibility
The compatibility table in 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.
See also
- WebKit CSS extensions
- File and Directory Entries API
- File and Directory Entries API support in Firefox
<input type="file">
::file-selector-button by Mozilla Contributors is licensed under CC-BY-SA 2.5.
