CSS ::file-selector-button Pseudo-element

Definition and Usage

CSS ::file-selector-button Pseudo-elements are used to select buttons of type <input type="file">.

Example

Example 1

Set the style of the <input type="file"> button:

::file-selector-button {
  border: 2px solid black;
  padding: 5px 10px;
  border-radius: 5px;
  background-color: lightgreen;
}

Try It Yourself

Example 2

Set the style of the <input type="file"> button and add a hover effect:

::file-selector-button {
  border: 2px solid black;
  padding: 5px 10px;
  border-radius: 5px;
  background-color: lightgreen;
}
::file-selector-button:hover {
  background-color: salmon;
  cursor: pointer;
}

Try It Yourself

CSS Syntax

::file-selector-button {
  css declarations;
}

Technical Details

Browser Support

The numbers in the table specify the first browser version that fully supports this pseudo-element.

related page

Tutorial:CSS Pseudo-elements