::file-selector-button
The ::file-selector-button
CSS pseudo-element represents the button of an <input>
of type="file"
.
Note: Older versions of WebKit/Blink compatible browsers like Chrome, Opera and Safari (indicated by the -webkit
prefix) supported a non-standard pseudo-element ::-webkit-file-upload-button
.
Legacy Edge and later versions of IE supported a non-standard pseudo-element ::-ms-browse
.
Both of these pseudo-elements serve the same purpose as ::file-selector-button
.
Syntax
selector::file-selector-button
Examples
Basic example
HTML
<form>
<label for="fileUpload">Upload file</label>
<input type="file" id="fileUpload">
</form>
CSS
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;
}
Result
Example with fallback for older browsers supporting the -webkit
and -ms
prefixes. 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.
Fallback example
HTML
<form>
<label for="fileUpload">Upload file</label>
<input type="file" id="fileUpload">
</form>
CSS
input[type=file]::-ms-browse {
border: 2px solid #6c5ce7;
padding: .2em .4em;
border-radius: .2em;
background-color: #a29bfe;
}
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]::-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
BCD tables only load in the browser