::file-selector-button

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis ⁨avril 2021⁩.

Le pseudo-élément CSS ::file-upload-button représente le bouton d'un élément <input> de type file.

Exemple interactif

input {
  margin-top: 1rem;
}

input::file-selector-button {
  font-weight: bold;
  color: dodgerblue;
  padding: 0.5em;
  border: thin solid grey;
  border-radius: 3px;
}

<label for="avatar">Choisissez une photo de profil&nbsp;:</label><br />

<input id="avatar" type="file" name="avatar" accept="image/png, image/jpeg" />

Syntaxe

css

::file-selector-button {
  /* ... */
}

Exemples

Exemple simple

HTML

html

<form>
  <label for="fileUpload">Uploader un fichier</label>
  <input type="file" id="fileUpload" />
</form>

CSS

form {
  display: flex;
  gap: 1em;
  align-items: center;
}

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;
}

Résultat

Notez que ::file-selector-button est un élément entier, et en tant que tel, il correspond aux règles de la feuille de style de l'agent utilisateur. En particulier, les polices et les couleurs ne seront pas nécessairement héritées de l'élément input.

Exemple de repli

HTML

html

<form>
  <label for="fileUpload">Uploader un fichier</label>
  <input type="file" id="fileUpload" />
</form>

CSS

form {
  display: flex;
  gap: 1em;
  align-items: center;
}

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"]::-ms-browse:hover {
  background-color: #81ecec;
  border: 2px solid #00cec9;
}

input[type="file"]::-webkit-file-upload-button:hover {
  background-color: #81ecec;
  border: 2px solid #00cec9;
}

input[type="file"]::file-selector-button:hover {
  background-color: #81ecec;
  border: 2px solid #00cec9;
}

Résultat

Spécifications

Specification
CSS Pseudo-Elements Module Level 4 # file-selector-button-pseudo

Compatibilité des navigateurs

Voir aussi

Help improve MDN

Learn how to contribute

Cette page a été modifiée le ⁨1 janv. 1970⁩ par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content