::file-selector-button
input[type="file"]::file-selector-button
Selects the “Choose file” button inside an <input type="file"> field. It can be given a border, a background, a font and states such as :hover, so that it looks like the other buttons of the website. The text next to the button (the file name) stays up to the browser.
Examples
The button of a file field in the style of the website:
<input type="file" class="file">
.file::file-selector-button {
margin-right: 10px;
padding: 6px 14px;
border: 0;
border-radius: 6px;
background: #0088d1;
color: #fff;
font: inherit;
cursor: pointer;
}
.file::file-selector-button:hover {
background: #01579b;
}
The result: a blue rounded “Choose file” button (the text depends on the browser language), next to it “No file chosen”; on hover the button darkens.
Things to watch out for
- CSS changes neither the text of the button nor the text about the selected file – they are set by the browser and the language of the system. A completely custom look can be made only by hiding the field visually and styling a
<label>; the field must stay operable with the keyboard, though. - Chrome and Safari used to know only
::-webkit-file-upload-button. If you need it, write it as a separate rule, not in a list with::file-selector-button. - The hover state is written after the pseudo-element:
::file-selector-button:hover.
Browser support
Baseline – widely available: in all major browsers since April 2021, considered widely available since October 2023. Since version: Chrome 89, Firefox 82, Safari 14.1. As of October 2026 (MDN browser-compat-data).