Style bouton Upload

Par MrAthom, il y a 14 ans

Proposition de tutoriels

Bonjour, j'ai cherché sur internet comment styliser un bouton upload de fichier mais aucun tuto ne fonctionne correctement.

Je suggère donc de faire un tuto pour nous montrer une bonne fois pour toute comment styliser un bouton d'upload de fichier.

Merci.

4 réponses

Grafikart, il y a 14 ans

Impossible nativement, il faut utiliser des plugin javascript comme par exemple uniform

djtec, il y a 14 ans

Si tu peux styliser en css

Wapaca, il y a 12 ans

Comment ça en css ? la technique de cliquer sur le <label> ne fonctionne pas avec ce type de champs :s

Bon je vais voir du côté de uniform merci pour le plugin.

darkhexagon, il y a 12 ans

Salut,

Moi j'utilise ça :

<span class="btn btn-primary fileinput-button">
    <span>Choisir un fichier</span>
    <input type="file" name="files" multiple>
</span>

Avec le code css : 

.fileinput-button {
  position: relative;
  overflow: hidden;
}
.fileinput-button input {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  opacity: 0;
  filter: alpha(opacity=0);
  transform: translate(-300px, 0) scale(4);
  font-size: 23px;
  direction: ltr;
  cursor: pointer;
}
.fileupload-buttonbar .btn,
.fileupload-buttonbar .toggle {
  margin-bottom: 5px;
}

Ca devrait marcher sur les anciens navigateurs avec modernizer