::file-selector-button
The "Choose file" button inside `<input type="file">`; lets you style it like the other buttons on the page.
Syntax
input[type=file]::file-selector-button { … }Examples
A file field with a styled button:
<style>
input[type="file"]::file-selector-button {
margin-right: 12px; padding: 6px 14px;
border: none; border-radius: 6px;
background: teal; color: white; cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background: darkslategray; }
</style>
<input type="file">Notes
The text next to the button ("No file chosen") cannot be styled separately — it takes the font and color of the <input>. The button label itself comes from the browser and its language. Supported in all current browsers since 2021.
See also
- <input> — An input field; its kind is set by the `type` attribute.
- <button> — A button: submits a form or triggers an action.
- appearance — Turns off the built-in look of form controls so they can be styled from scratch.
- ::placeholder — The placeholder text of a field — the hint from the `placeholder` attribute.
In the tutorial
- Styling forms — How to style fields and buttons — padding and borders, the focus state, placeholder, disabled and invalid fields, accent-color and custom checkboxes with appearance: none.