Affectation de l'élément de type entrée 'FICHIER'

Question

Comment définir correctement un bouton 'fichier' avec une image, pour qu'il soit propre et agréable dans tous les navigateurs et qu'il n'y ait pas de chevauchement de texte par rapport au contrôle par défaut?

Merci!

Answer 1

La façon dont cela se fait habituellement est de rendre l'élément d'entrée de fichier 100% transparent avec la propriété css opacity et de placer un joli bouton derrière. De cette façon, le champ de fichier reçoit toujours le clic, mais l'aspect de l'élément sous-jacent peut être stylé et scripté comme vous le souhaitez.

Answer 2

Les boutons de fichier sont un mal de tête majeur. J'utiliserais personnellement http://swfupload.org/

Answer 3

J'aime cette approche KISS, comme d'habitude. Cela a fonctionné pour moi en chrome et Firefox.

HTML:

<div class="form-group"> 
    <label>Cover Image:</label> 
    <div id="uploadLabelDiv" class="fade"> 
     <p>Change cover image</p> 
     <label for="upload"> 
       <img [src]="project.cover" class="img-responsive" id="coverImage" /> 
      </label> 
     </div> 
</div> 
<input type="file" id="upload" (change)="fileuploaded($event)" style="visibility:hidden;" /> 

CSS:

#uploadLabelDiv { 
    position: relative; 
    max-width: 400px; 
    background: transparent; 
    color: #fff; 
    transition: all 0.3s; 
} 

.fade { 
    opacity: 1; 
} 

.fade:hover > label { 
    opacity: 0.4; 
} 

.fade > p { 
    opacity: 0; 
    transition: none; 
} 

.fade:hover > p { 
    opacity: 1; 
    transition: all 0.3s; 
} 

p { 
    position: absolute; 
    top: calc(50% - 30px); 
    left: calc(50% - 60px); 
    color: black; 
    font: bold; 
} 

les classes manquantes sont bootstrap.