::file-selector-button - Selector CSS

Description of the ::file-selector-button pseudo-element.

The ::file-selector-button pseudo-element is the button in a file input box.
These input boxes are obtained with the following HTML code <input type="file" id="..." />

Depending on the browser, the rendering can take different forms, but there is always a button and a label which mentions the name of the chosen file.

Internet Explorer
Opera
Edge
Firefox
Samsung Internet

Unfortunately, it is not possible to change the button label to pure CSS. This depends on the browser and language set up in the system.

Examples of use of pseudo-élément ::file-selector-button.

The styles in the example below should make the button look consistent across all browsers.

Browser compatibility with ::file-selector-button.

Notes:

(1) Use the non standard pseudo-element ::-ms-browse.

1

::file-selector-button
pseudo-element

Estimated overall support.

96%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

1

KaiOS Browser

Opéra Mobile

Chrome

Edge

Firefox

Opéra

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Historic of the ::file-selector-button pseudo-element.

• CSS Pseudo-Elements Module Level 4

  First definition ot the ::file-selector-button pseudo-element.
  

  January 15, 2015

  Working Draft.

  

  

  

Other pseudo-elements.

Many other pseudo-elements are defined in the module CSS Pseudo-Elements Module . Here is the list, to facilitate your research.

Selectors:

::after

A pseudo-element designating the location immediately after an element.

::before

A pseudo-element designating the location immediately before an element.

::details-content

This pseudo-element targets the detailed content of a details tag.

::first-letter

A pseudo-element targeting the first letter of the paragraph.

::first-line

A pseudo-element targeting the first line of the paragraph.

⚠

::grammar-error

Peudo-elements targeting texts with spelling mistakes (::spelling-error) or grammar errors (::grammar-error).

::highlight()

Pseudo-element that targets the text selected after a search in the browser.

✗

::inactive-selection

Targets the selected element or text when the window it is on is not active.

::marker

A pseudo-element designating the marker in a list (bullet or number).

::placeholder

A pseudo-element designating the placeholder text in an input box (placeholder attribute).

⚠

::prefix

Target the punctuation characters that can precede the first letter of an element. Allows for a different styling of the first letter and the characters that come before it.

⚠

::search-text

Target the text searched by the internet user (browser search zone CTRL+F).

::selection

A pseudo-element that targets user-selected content.

::spelling-error

A pseudo-element that targets words or text with orthograph misspellings.

⚠

::suffix

Target the punctuation characters that may follow the first letter of an element. Allows for different styling of the first letter and the punctuation characters that follow it.

::target-text

Targets the text of the item designated by the url bookmark.