CSS ::file-selector-button Pseudo-Element
The ::file-selector-button pseudo-element styles the button displayed by an HTML <input type="file"> element. It allows developers to customize the button's colors, borders, padding, and other visual properties while preserving the browser's native file selection functionality.
Syntax
input[type="file"]::file-selector-button {
background-color: #0066cc;
color: #fff;
padding: 10px 15px;
border: none;
border-radius: 4px;
}The input[type="file"] selector targets HTML file input elements.
The ::file-selector-button pseudo-element targets the button that opens the browser's file selection interface.
The background-color property changes the button's background.
The color property changes the button's text color.
The padding, border, and border-radius properties control its spacing and appearance.
Important: The pseudo-element styles the file selection button, not the entire file input or the operating system's file picker dialog.
How It Works
An HTML file input allows users to select files from their device.
By default, browsers display a file selection button and an area indicating whether a file has been selected.
The ::file-selector-button pseudo-element provides a styling target for the button.
For example:
input[type="file"]::file-selector-button {
background-color: #0066cc;
color: #fff;
cursor: pointer;
}The button receives a blue background, white text, and a pointer cursor.
Clicking the button still opens the browser's native file selection interface.
After selecting a file, the browser displays the selected filename according to its normal file input behavior.
The CSS does not change which files are selected or how they are uploaded.
Default File Input
A basic file input requires only an HTML <input> element with type="file".
<label for="default-upload">Choose a file:</label>
<input type="file" id="default-upload" name="default-upload">The browser supplies the file selection button and filename display.
Click the button to open the file picker and select a file.
The button's default appearance and text may vary depending on the browser and operating system.
No JavaScript is required to open the native file picker.
Styling the File Selection Button
The ::file-selector-button pseudo-element supports common CSS properties for styling the native file selection button.
Changing the Background Color
input[type="file"]::file-selector-button {
background-color: #0066cc;
color: #fff;
}This rule creates a blue button with white text.
Adding Padding
input[type="file"]::file-selector-button {
padding: 10px 18px;
}This rule increases the space inside the button.
Adding Rounded Corners
input[type="file"]::file-selector-button {
border-radius: 6px;
}This rule gives the button rounded corners.
Changing the Border
input[type="file"]::file-selector-button {
border: 2px solid #0066cc;
}This rule adds a blue border around the button.
Combining Styles
input[type="file"]::file-selector-button {
padding: 10px 18px;
background-color: #0066cc;
color: #fff;
border: 1px solid #0066cc;
border-radius: 5px;
font-weight: bold;
cursor: pointer;
}These declarations create a more distinctive file selection button while retaining the native file input behavior.
Example
The following example styles a file upload button with a blue background, white text, rounded corners, and a darker hover state.
HTML:
<label for="styled-upload">Upload a document:</label>
<input type="file" id="styled-upload" name="styled-upload" class="custom-file">CSS:
.custom-file {
font-size: 14px;
color: #333;
}
.custom-file::file-selector-button {
padding: 10px 18px;
margin-right: 12px;
background-color: #0066cc;
color: #fff;
border: 1px solid #0066cc;
border-radius: 5px;
font-weight: bold;
cursor: pointer;
}
.custom-file::file-selector-button:hover {
background-color: #004c99;
border-color: #004c99;
}Click the blue button to select a file.
Move the pointer over the button to see its darker hover background.
The selected filename remains controlled by the browser.
The margin-right property adds spacing between the button and the filename display.
The file input remains a native HTML form control.
Hover and Focus Styles
The file selection button can respond to pointer interaction using the :hover pseudo-class.
input[type="file"]::file-selector-button:hover {
background-color: #004c99;
color: #fff;
}This rule changes the button's appearance when the pointer moves over it.
For keyboard accessibility, apply a visible focus indicator to the file input.
input[type="file"]:focus-visible {
outline: 2px solid #0066cc;
outline-offset: 3px;
}The :focus-visible pseudo-class matches when the browser determines that a visible focus indicator is appropriate.
The outline helps keyboard users identify the focused file input.
Do not remove the default focus outline without providing a suitable replacement.
Selecting Multiple Files
The HTML multiple attribute allows users to select more than one file.
<label for="multiple-upload">Choose files:</label>
<input type="file" id="multiple-upload" name="files[]" multiple>The ::file-selector-button pseudo-element can style the button in the same way as a single-file input.
input[type="file"]::file-selector-button {
padding: 10px 15px;
background-color: #0066cc;
color: #fff;
border: none;
border-radius: 4px;
}The multiple attribute changes the file selection behavior, not the purpose of the pseudo-element.
Browsers may display different button text or filename information when multiple file selection is enabled.
The selected files can be submitted through an HTML form or processed with JavaScript.
Restricting File Types
The HTML accept attribute provides a list of preferred file types for the file picker.
For example, the following input requests image files:
<label for="image-upload">Upload an image:</label>
<input type="file" id="image-upload" name="image-upload" accept="image/*">The file selection button can still be styled using ::file-selector-button.
input[type="file"]::file-selector-button {
background-color: #008060;
color: #fff;
padding: 10px 15px;
border: none;
border-radius: 4px;
}The accept attribute provides a hint to the browser's file picker about which file types to display or allow.
It is not a security validation mechanism. File types must still be validated when files are processed or uploaded to a server.
The ::file-selector-button pseudo-element changes only the button's appearance.
Legacy ::-webkit-file-upload-button
Before the standardized ::file-selector-button pseudo-element became widely available, WebKit-based browsers used the vendor-prefixed ::-webkit-file-upload-button selector.
For example:
input[type="file"]::-webkit-file-upload-button {
background-color: #0066cc;
color: #fff;
padding: 10px 15px;
border: none;
}This is a legacy vendor-prefixed selector.
For modern websites, prefer the standardized ::file-selector-button pseudo-element.
If support for older browsers is required, the legacy selector can be included in a separate rule.
input[type="file"]::-webkit-file-upload-button {
background-color: #0066cc;
color: #fff;
}
input[type="file"]::file-selector-button {
background-color: #0066cc;
color: #fff;
}Keeping the rules separate avoids problems in older browsers that discard an entire selector list when one selector is not recognized.
Vendor-prefixed selectors should only be used when necessary for the browsers being supported.
Limitations
The ::file-selector-button pseudo-element has several important limitations.
- It styles the file selection button rather than the entire file input.
- It does not customize the operating system's file picker dialog.
- It does not change the selected filename or the browser's filename display.
- It does not control which files users can select.
- It does not upload files or process their contents.
- It does not provide a standard way to replace the button's displayed text.
- The exact appearance can vary between browsers and operating systems.
For example, the following CSS does not provide a reliable way to rename the native button:
input[type="file"]::file-selector-button {
content: "Upload File";
}The content property is not a supported method for replacing the native file selection button's label.
For custom button text, developers can use a properly associated HTML <label> with an accessible file input, although that approach requires additional markup and styling.
Accessibility Considerations
Using ::file-selector-button preserves the native HTML file input, including its built-in keyboard interaction and file selection behavior.
Follow these accessibility practices:
- Associate each file input with a descriptive HTML
<label>. - Provide sufficient contrast between button text and background colors.
- Preserve a visible keyboard focus indicator.
- Use padding that makes the button easy to activate.
- Explain file type or file size requirements when necessary.
- Do not rely on color alone to communicate important information.
- Keep the input usable when custom CSS is unavailable.
For example:
<label for="resume-upload">Upload your resume (PDF):</label>
<input type="file" id="resume-upload" name="resume-upload" accept=".pdf,application/pdf">The label explains the purpose of the input and the expected file type.
The accept attribute helps guide file selection, but it does not replace server-side validation.
Styling the native file selection button is generally simpler than replacing the entire control with a custom JavaScript interface.
Browser Support
The ::file-selector-button pseudo-element is widely available in modern browsers, including Chrome, Edge, Firefox, and Safari.
The exact default button text, spacing, and appearance may vary by browser and operating system.
Older browsers may require the legacy ::-webkit-file-upload-button selector or may ignore custom button styling.
When the pseudo-element is unsupported, the native file input remains functional.
For current compatibility information, visit Can I Use? .
Specifications
The ::file-selector-button pseudo-element is defined in the CSS Pseudo-Elements Module Level 4 .
The HTML file input and its attributes are defined in the WHATWG HTML Living Standard .
These specifications describe the file selection control and the CSS pseudo-element used to style its button.