::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-button
CSS pseudo-element represents the button of an 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;
}
Syntax
css
::file-selector-button {
/* ... */
}
Examples
Basic example
HTML
html
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
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 |