::file-selector-button CSS Pseudo Element

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

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

HTML

<form>

  <label for="fileUpload">Upload file</label>

  <input type="file" id="fileUpload" />

</form>

CSS

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;

}

Result

Editor

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.