::file-selector-button CSS Pseudo Element

Description

The CSS ::file-selector-button pseudo-element selects the button that opens the file dialog on an <input type="file"> element. It can be used to style the button, such as changing its color, font, or background image.

The ::file-selector-button pseudo-element is a relatively new feature, and is only supported by some browsers, including Chrome, Firefox, and Edge. It is not yet supported by Safari or Internet Explorer.

To use the ::file-selector-button pseudo-element, you simply add it to the selector for your <input type="file"> element. For example, the following CSS will change the background color of the file selector button to red:

input[type="file"]::file-selector-button {
background-color: red;
}


You can also use the ::file-selector-button pseudo-element to add more complex styling, such as rounded corners or a border. For example, the following CSS will add a rounded border to the file selector button:
input[type="file"]::file-selector-button {
border: 2px solid #ccc;
border-radius: 5px;
}

The ::file-selector-button pseudo-element is a useful way to customize the appearance of file selector buttons. It can be used to make them more consistent with the rest of your website's design, or to simply make them more visually appealing.

Syntax

selector::file-selector-button

Values

Example

<form>
<label for="fileUpload">Upload file</label>
<input type="file" id="fileUpload" />
</form>
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;
}

Notes

In CSS3, pseudo-elements were denoted by two colons to make the syntax different from pseudo-classes. In CSS2, they are indicated by a single colon. Browsers generally understand both syntaxes.

Browser Support

The following table will show you the current browser support for the CSS ::file-selector-button pseudo element.

Desktop
Edge Chrome Firefox Opera Safari
8989827514.1
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
89826314.51589

Last updated by CSSPortal on: 1st October 2023