Comment puis-je style un champ de saisie fichier dans Firefox?

Je suis actuellement en train de faire le front-end pour un site avec looooads de formes, de tout style et de la recherche jolie dans IE, mais je viens de remarqué que dans Firefox, le fichier de champs de saisie ne répondent pas à l'un de mes styles, tous les autres types de champs de saisie sont très bien. Je l'ai vérifié dans Firebug et sa associer le bon style, mais ne change pas la façon dont il regarde.

Si ce n'est pas complète pet cerveau en mon nom, alors est-ce un problème connu dans Firefox? Et si oui, comment ai-je jamais remarqué avant?

Voici un exemple de code.

CSS:

form.CollateralForm input,
form.CollateralForm textarea
{
    width:300px;
    font-size:1em;
    border: solid 1px #979797;
    font-family: Verdana, Helvetica, Sans-Serif;
}

HTML:

<form method="bla" action="blah" class="CollateralForm">
   <input type="file" name="descriptionFileUpload" id="descriptionFileUpload" />
</form>

J'ai aussi essayé d'appliquer une classe à elle, mais cela ne fonctionne pas non plus.

InformationsquelleAutor Wayne Austin | 2008-12-09
  1. 42

    Beaucoup de réponses ci-dessus sont assez vieux. En 2013 une solution beaucoup plus simple existe: presque tous les navigateurs actuels...

    • Chrome
    • IE
    • Safari
    • Firefox avec un peu de ligne de fixer

    passer à travers les événements de clic sur les étiquettes. Essayer ici: http://jsfiddle.net/rvCBX/7/

    • Style de la <label> cependant vous vous souhaitez que votre téléchargement de fichiers à être.
    • Ensemble for="someid" attribut sur l'étiquette
    • Créer un <input id="someid"> élément, qui est cachée.

    Cliquant sur l'étiquette de relais de l'événement à la fileupload dans Chrome, IE et Safari.

    Firefox nécessite une très petite solution de contournement, qui est détaillé dans cette réponse.

    • Absolument fantastique, merci beaucoup!
    • puis-je modifier le code css que je veux? jsfiddle quelque chose comme ça.. j'ai essayé, mais en hauteur, largeur, etc ne pas changer.
    • Yep, vous devez définir display: block dans votre exemple jsfiddle.net/prashantptapase/rvCBX/200
    • Merci beaucoup
    • bel exemple merci. Si vous remplacez le visibility:hidden avec display:none; qu'il ne sera pas l'effet de votre style
    InformationsquelleAutor mikemaccana
  2. 4

    Firefox peut être piraté en utilisant le code HTML de saisie de la taille de l'attribut:
    size="40"
    lors de l'utilisation d'un css largeur de contrôle de la largeur du terrain sur le bouton + dans la mise en page

    • est-ce encore valable? Essayer ce sur Firefox 51.0.1 sur Mac ne semble pas résoudre le problème...
    • Autour de Firefox 36, il a commencé à suivre les déclarations CSS et dans le même temps, en ignorant l'attribut de taille.
    InformationsquelleAutor ppostma1
  3. 3

    Disons que vous avez votre entrée:

    <input style="display:none" id="js-choose-file" type="file">

    Créer un faux bouton à l'aide de jQuery.

    <a id="js-choose-computer" href="javascript:void(0);">From Computer</a>

    Style le bouton au-dessus de n'importe quelle façon. Alors:

    $("#js-choose-computer").on("click", function() {
  $("#js-choose-file").click();
  return false;
});
    InformationsquelleAutor Gaurav Gupta
  4. 0

    Customformsjs pluggin répondre à cette question à son Fichier de classe de module.

    http://customformsjs.com/doc/File.html

    http://customformsjs.com/doc/File.js.html

    Fondamentalement, il rend possible le type de Fichier de style de champs de saisie avec certaines restrictions. Il travail en l'enveloppant dans un récipient et de le rendre transparent, de sorte que votre clic. La page de démonstration montre en action

    InformationsquelleAutor Mitermayer Reis
  5. -4

    Utilisation de cheat code ( # ) en face de l'attribut de classe css
    dire:

    form.CollateralForm input,
form.CollateralForm textarea
{
    width:300px;  //for firefox
    #width:200px; //for IE7
    _width:100px; //for IE6
    font-size:1em;
    border: solid 1px #979797;
    font-family: Verdana, Helvetica, Sans-Serif;
}
    • en fait, le trait de soulignement hack est pour IE6.
    • je ne vois pas comment cela va l'aider, le problème est avec firefox ne répond pas à tout style de fichier de champs de saisie, ce n'est pas comme sa croix-navigateur style de problème
    • comment est cette réponse utile?
    InformationsquelleAutor Samiksha