::file-selector-button CSS Pseudo Element


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.





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


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.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 1st October 2023