Style bouton Upload

MrAthom
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

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

djtec

Si tu peux styliser en css

Wapaca

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

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