html bouton d'entrée style CSS3

Question

J'ai vu quelques résultats via les questions connexes mais je n'ai pas vraiment semblé montrer ce que je veux. Vous cherchez un moyen de simplement styliser le bouton dans tous les principaux broswers facilement.

<input type="file" name="file" id="file" size="29" class="formButton" /> 
<span class="smalltext">(.txt only)</span> 

Je veux que le bouton de navigation pour utiliser le CSS, j'ai vu des résultats qui mettent un bouton faux au-dessus du vrai, est-ce vraiment la meilleure approche à prendre?

Answer 1

Actuellement, il n'y a aucun moyen de mettre en forme de manière cohérente un champ de saisie de fichiers entre les navigateurs. Vous pouvez utiliser l'une des nombreuses "astuces" (qui, comme vous l'avez mentionné, recouvrent simplement le bouton), mais attention à ce que vous puissiez interférer avec l'accès au clavier sur le terrain.

Answer 2

La meilleure solution que j'ai trouvée est soit de superposer votre propre comme vous l'avez mentionné, soit d'utiliser quelque chose comme Dojo, qui fait effectivement la même chose. Autant que je sache, vous ne pouvez pas styler le bouton d'entrée de fichier.

Answer 3

N'essayez pas ça!

Même si vous le faites fonctionner, il existe encore des navigateurs comme Safari qui utilisent des widgets de sélection de fichiers non standard!

Il est préférable de laisser apparaître le widget du fichier natif.

Answer 4

En fait, avec jQueryUI vous pouvez le faire simplement:

Javascript pour capotage (non obligatoire):

$(".fg-button:not(.ui-state-disabled)") 
       .hover(
        function(){ 
         $(this).addClass("ui-state-hover"); 
        }, 
        function(){ 
         $(this).removeClass("ui-state-hover"); 
        } 
       ) 

Code Button:

<input type="submit" name="something" id="something" value="Submit" class="fg-button ui-state-default ui-corner-all"> 

Non pas en raison de IE étant un produit Microsoft, les coins arrondis se dégradent gracieusement.