web-dev-qa-db-fra.com

Comment styliser un champ de saisie dans Firefox?

Je fais actuellement le front-end pour un site avec beaucoup de formulaires, tous stylés et jolies dans IE, mais je viens de remarquer que, dans Firefox, les champs de saisie de fichier ne répondent à aucun de mes styles, à tous les types de champs de saisie conviennent. Je l’ai vérifiée dans Firebug et l’association des styles corrects, mais sans changer son apparence.

S'il ne s'agit pas d'un fart cérébral complet en mon nom, s'agit-il d'un problème connu dans Firefox? Et si oui, comment est-ce que je ne l'ai jamais remarqué auparavant?

Voici un exemple du 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 un cours, mais ça ne marche pas non plus.

htmlcssformsfile
29
Wayne Austin

La plupart des réponses ci-dessus sont assez anciennes. En 2013, une solution beaucoup plus simple existe: presque tous les navigateurs actuels ...

  • Chrome
  • IE
  • Safari
  • Firefox avec quelques corrections

passer à travers les événements de clic des étiquettes. Essayez-le ici: http://jsfiddle.net/rvCBX/7/

  • Style le <label> comme vous voulez que votre téléchargement de fichier soit.
  • Définir l'attribut for="someid" sur l'étiquette 
  • Créez un élément <input id="someid">, c'est caché.

En cliquant sur l'étiquette, l'événement se transmettra au fileupload dans Chrome, IE et Safari. 

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

42
mikemaccana

Firefox peut être piraté en utilisant l'attribut HTML input size: Size = "40" en utilisant une largeur css pour contrôler toute la largeur du champ + bouton dans la mise en page

4
ppostma1

Disons que vous avez votre contribution:

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

Créez un faux bouton en utilisant jQuery.

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

Style le bouton ci-dessus comme vous le souhaitez. Ensuite:

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

Customformsjs pluggin résout ce problème dans sa classe de module File.
http://customformsjs.com/doc/File.html

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

En gros, il est possible de styler les champs de saisie de fichier avec certaines restrictions. Cela fonctionne en l'enveloppant dans un conteneur et en le rendant transparent pour que vous cliquiez dessus. La page de démonstration le montre en action

0
Mitermayer Reis