Pouvons-nous changer le style <input type = "file">?

Question

J'ai essayé de changer le formulaire HTML, fichier de type d'entrée. Voici mon code:

HTML, form id = forme

<input class="upload_file" type="file" id="file" name="file" /> 

.CSS

I tried both: 
.upload_button{ 
    background: url('../images/upload_btn_bg.png') no-repeat; 
    width: 200px; 
    height: 40px; 
} 

#form input[type=file]{ 
    background: url('../images/upload_btn_bg.png') no-repeat; 
    width: 200px; 
    height: 40px; 
} 

Aucun des deux de ces méthodes fonctionne. J'ai vu à partir de certains sites Web, comme Facebook, YouTube, Google ou Twitter, ils ont un style différent. Je me demande comment ils le font.

Answer 1

Vous ne pouvez rien faire avec le fichier de type d'entrée (autre que hacks énormes). Je sais que cela semble horrible, mais les normes Web n'ont toujours pas trouvé de solution pour cela. Ce que je suggérerais cependant, c'est que vous avez utilisé quelque chose de plus flexible, tel que swfUpload, qui vous permet de changer de montant, et aussi de vérifier la taille du fichier avant le téléchargement.

Quelques exemples soignées de celui-ci se trouvent here

Hope this vous aide

Answer 2

Par exemple, essayez cette variante http://www.quirksmode.org/dom/inputfile.html

Answer 3

En fait, vous pouvez!

Vous devez le faire avec la bibliothèque SI.Files.

Here est un bon article sur la façon dont son fait dans les détails:

Bonne chance!

Answer 4

Vous pouvez changer la taille de police pour la taille ou suivez cette URL http://www.quirksmode.org/dom/inputfile.html (ce qui est fondamentalement ce que je fais dans mes projets).

Answer 5

Pourquoi ne pas simplement mettre le css à afficher: none puis déclencher ce bouton avec un autre bouton? Ceci peut être facilement fait avec javascript et vous pouvez définir le style le bouton vous complètement

Voici un exemple de la façon de déclencher un bouton avec un autre, mais ce n'est l'une des nombreuses façons: One button firing another buttons click event

Answer 6

BHEE, il suffit d'ajouter des définitions de CSS à votre balise d'entrée html:

comme:

<select style:"...whatYoureadBelow..."></select> 

ou

<input style:"...whatYoureadBelow..." /> 

définitions CSS:

border:none; 
background-image:url('somePathToImage'); 
background-repeat:no-repeat; 
//those things below adjust according to your background image size 
width:XXpx; 
height:XXpx; 

Ainsi vous obtiendrez ce que vous avez sur facebook ou ailleurs;)

Answer 7

Meilleur bidouille jamais.Fichier d'entrée HTML:

<input type="file" class="hide" id='inputFile' /> 
<a href="#" id="triggerFile" class="btn btn-primary">Browse File</a> 

utilisant jQuery:

$('#triggerFile').on('click', function(e){ 
     e.preventDefault() 
     $("#inputFile").trigger('click') 
    });