::file-selector-button - Sélecteur CSS

::file-selector-button

Résumé des caractéristiques du sélecteur ::file-selector-button

Description rapide
Cible le bouton dans une zone de saisie du type file. Ce bouton a un rendu différent dans chaque navigateur.
Statut
Standard
Utilisable sur
HTML
Module W3C
Module CSS - Pseudo-éléments
Références (W3C)
Statut du document: WD (document de travail)

Description du pseudo-élément ::file-selector-button.

Le pseudo-élément ::file-selector-button désigne le bouton d'une zone de saisie de type file.
Ces zone de saisie s'obtiennent avec le code HTML suivant <input type="file" id="..." />

Suivant les navigateurs, la restitution peut prendre des formes différentes, mais il y a toujours un bouton et un libellé qui mentionne le nom du fichier choisi.

Internet Explorer

Sélecteur de fichier sur Internet Explorer

Opéra

Sélecteur de fichier sur Opéra

Edge

Sélecteur de fichier sur Edge

Firefox

Sélecteur de fichier sur Firefox

Samsung Internet

Sélecteur de fichier sur Samsung Internet

Il n'est malheureusement pas possible de changer le libellé du bouton en CSS pur. Celui-ci dépend du navigateur et de la langue paramétrée dans le système.

Exemples d'utilisation de ::file-selector-button.

Les styles de l'exemple ci-dessous devraient homogénéiser l'aspect du bouton sur tous les navigateurs.

Compatibilité des navigateurs.

1
Pseudo-élément
::file-selector-button
Estimation de la prise en charge globale.

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

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

Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse

Historique du pseudo-élément ::file-selector-button.

Autres pseudo-éléments.

De nombreux autres pseudo-éléments sont définis dans le module "module CSS - Pseudo-éléments" (CSS Pseudo-Elements Module ). En voici la liste, pour faciliter vos recherches.

Sélecteurs :

::after
Pseudo-élément désignant l'emplacement situé juste après un élément.
::before
Pseudo-élément désignant l'emplacement situé juste avant un élément.
::details-content
Ce pseudo-élément cible le contenu détaillé d'une balise details.
::first-letter
Pseudo-élément désignant la première lettre du paragraphe.
::first-line
Pseudo-élément désignant la première ligne du paragraphe.
⚠
::grammar-error
Des pseudo-élément ciblant les textes comportant des fautes d'orthographe (::spelling-error) ou des fautes de grammaire (::grammar-error).
::highlight()
Pseudo-élément qui cible le texte sélectionné à la suite d'une recherche dans le navigateur.
✗
::inactive-selection
Désigne l'élément ou le texte sélectionné lorsque la fenêtre sur laquelle il se trouve n'est pas active.
::marker
Pseudo-élément désignant le marqueur dans une liste (puce ou numéro).
::placeholder
Pseudo-élément désignant le texte de substitution dans une zone de saisie (attribut placeholder).
⚠
::prefix
Cible les caractères de ponctuation qui peuvent précéder la première lettre d'un élément. Permet une stylisation différente de la première lettre et des caractères qui la précède.
⚠
::search-text
Cible le texte recherché par l'internaute (zone de recherche CTRL+F du navigateur).
::selection
Pseudo-élément désignant le contenu sélectionné par l'utilisateur.
::spelling-error
Pseudo-élément désignant les mots ou les textes comportant des fautes d'orthographe.
⚠
::suffix
Cible les caractères de ponctuation qui peuvent suivre la première lettre d'un élément. Permet une stylisation différente de la première lettre et des caractères de ponctuation qui la suivent.
::target-text
Cible le texte de l'élément désigné par le signet de l'url.