J'ai eu un diable de temps à essayer de l'accomplir. Je ne voulais pas utiliser une solution Flash, et aucun des bibliothèques jQuery j'ai regardé étaient fiables sur tous les navigateurs.
Je suis venu avec ma propre solution, qui est mis en œuvre entièrement en CSS (sauf pour le onclick changement de style pour afficher le bouton 'cliqué').
Vous pouvez essayer un exemple ici: http://jsfiddle.net/VQJ9V/307/ (Testé dans FF 7, IE 9, Safari 5, Opera 11 et Chrome 14)
Il fonctionne en créant un grand fichier en entrée (avec font-size:50px), puis en l'enveloppant dans un div qui a une taille fixe et overflow:hidden. L'entrée est alors visible uniquement par le biais de cette "fenêtre" div. La div ne peut être donnée une image d'arrière-plan ou la couleur, le texte peut être ajouté, et l'entrée peut être rendu transparent pour révéler la div arrière-plan:
HTML:
<div class="inputWrapper">
<input class="fileInput" type="file" name="file1"/>
</div>
CSS:
.inputWrapper {
height: 32px;
width: 64px;
overflow: hidden;
position: relative;
cursor: pointer;
/*Using a background color, but you can use a background image to represent a button*/
background-color: #DDF;
}
.fileInput {
cursor: pointer;
height: 100%;
position:absolute;
top: 0;
right: 0;
z-index: 99;
/*This makes the button huge. If you want a bigger button, increase the font size*/
font-size:50px;
/*Opacity settings for all browsers*/
opacity: 0;
-moz-opacity: 0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0)
}
Laissez-moi savoir si il ya des problèmes avec elle et je vais essayer de les réparer.
