Forum Programmation.web Stylish sous firefox

Posté par  . Licence CC By‑SA.
Étiquettes :
1
23
avr.
2014

Bonjour

Je suis en train d'utiliser le module stylish sous firefox 28 pour modifier l'aspect des élements "input" dans une page web (type submit)
j'ai donc dans mon script stylish 

input {
background-color: black !important;
color:white !important
}

Ceci fonctionne parfaitement dans firefox sous Linux (j'ai un bouton submit avec du texte blanc sur un fond noir) et ne fonctionne pas du tout dans firefox sous windows 7 (seulement la couleur du texte change, pas la couleur de fond, du coup ça devient quasi illisible, la couleur de fond étant grise)
Le script est pour un utilisateur sous windows

Mes quelques recherches n'ont rien donné, il faut croire que windows agit partiellement sur le rendu des boutons affichés dans les pages html.
Je n'ai qu'un seul poste accessible sous windows 7, je n'ai donc pas pu tester si c'est reproductible
Je suis donc preneur d'idées pour arriver à mes fins, si c'est possible.

  • # Ah ça…

    Posté par  . Évalué à 3. Dernière modification le 24 avril 2014 à 00:25.

    il faut croire que windows agit partiellement sur le rendu des boutons affichés dans les pages html

    Pour avoir fait mumuse récemment avec la personnalisation des couleurs de l'interface de Windows 7 je peux confirmer cet état de fait. J'ai trouvé qu'il était impossible de personnaliser les couleurs de l'interface graphique avec quelque chose de spécifique (comme du vert sur fond noir genre terminal préhistorique :) car ça niquait complètement l'affichage des pages web dans Firefox…

    Je trouve ce mélange entre configuration des décorations/couleurs des fenêtres de l'UI et celles des éléments d'une page web… très chiant… bon après je ne sais pas, je ne suis peut-être pas doué. Il y a peut-être un moyen d'y arriver, d'empêcher que le système influe sur le rendu des pages web, mais j'ai la flemme de chercher.

    EDIT : J'ai même remarqué des différences dans le rendu des textarea dans Firefox en passant du thème Windows 7 au thème Windows Classic :/

    • [^] # Re: Ah ça…

      Posté par  . Évalué à 2.

      Hum, donc peu d'espoir…
      Merci pour ces informations.
      Pour les moyens d'y arriver, j'ai essayé pas mal de trucs sans succès.

      • [^] # Re: Ah ça…

        Posté par  . Évalué à 1. Dernière modification le 25 avril 2014 à 00:02.

        Mets lui une propriété border ou utilises background sans -color et ça devrait le faire :).

        • [^] # Re: Ah ça…

          Posté par  . Évalué à 2.

          Merci du tuyau mais ça ne change rien pour mon problème (les deux cas)
          En passant, l'élément input "type=file" n'a pas le même comportement que le type "submit" : je ne peux même pas changer la couleur du texte affiché sur le bouton "parcourir"… c'est vraiment n'importe quoi

          • [^] # Re: Ah ça…

            Posté par  . Évalué à 2.

            Ahh désolé j'avais pas vu que c'était de l'input type="file".
            En effet compliqué à styler mais pas impossible.
            Pour un bon exemple va voir les css de : http://blueimp.github.io/jQuery-File-Upload/ qui fait ca très bien.

            • [^] # Re: Ah ça…

              Posté par  . Évalué à 2.

              Non, j'en rajoutais juste avec le type=file… ce comportement différent (du type=submit) est d'ailleurs également observable sous firefox + linux

              Tes conseils avec le type=submit ne fonctionne pas dans mes tests avec Stylish.
              Sinon, je viens de regarder les css de ta page en lien : avec bootstrap css donc : http://getbootstrap.com/2.3.2/

              Il y a des trucs dans les class css pour afficher les boutons de l'exemple qui sont spécifiques des différents browsers voir pour MS (les filters)

              .btn-primary {
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #006dcc;
  *background-color: #0044cc;
  background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
  background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
  background-image: -o-linear-gradient(top, #0088cc, #0044cc);
  background-image: linear-gradient(to bottom, #0088cc, #0044cc);
  background-repeat: repeat-x;
  border-color: #0044cc #0044cc #002a80;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0044cc', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}

              Je n'avais pas poussé, n'y pensé (merci pour la piste), jusque là (le -moz-xxx etc), je vais tester dès que je remets la main sur le windows, ça fonctionne évidemment parfaitement sous firefox + stylish + linux.

              Merci

Suivre le flux des commentaires

Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.