Checkbox qui apparaissent mal dans Firefox

L’auteur de ce sujet a trouvé une solution à son problème.
Auteur du sujet

Bonjour à tous,

je poste ce message parce que je me heurte à un problème particulièrement dérangeant : les checkbox dans Firefox apparaissent de telle sorte qu’il m’est impossible de savoir si elles sont cochées ou pas.

Voici un exemple :

Exemple
Exemple

En cherchant sur internet je suis tombé sur ce poste de blog mais la solution proposée n’a pas marché, toutefois je pense que ça met sur une bonne piste, à mon avis modifier le fichier userContent.css devrait pouvoir résoudre le problème…

Dans tous les cas j’espère que vous pourrez m’aider et je vous remercie d’avance. :)

« La Nature est un livre écrit en langage mathématique », Galilée

+0 -0

On n’a pas assez éléments. Je présume que la règle CSS fonctionne sur chrome et pas sur firefox.

Ta correction n’a pas dû fonctionner car il y a un problème de priorité :

  • Soit tu as mis tes règles CSS de correction avant ton CSS actuel ;
  • Soit tu n’avais pas un chemin CSS prioritaire pour que tes règles s’appliquent en dernière et ainsi donner la priorité à ces nouvelles règles.

EDIT : Sur mobile je n’avais pas vu que le message était dans "Système et matériel", je présume que ton bug est présent sur tous les sites webs ? Ma réponse tombe au sol1.

EDIT 2 : Je te donnerais ce que j’ai sur Windows si tu veux sauf si quelqu’un le fait avant.


  1. Nous les avions disons "tomber au sol" au lieu de "tomber à l’eau" car nous tombons d’abord au sol avant de tomber dans l’eau. :-°

Édité par A-312

+1 -0
Auteur du sujet

On n’a pas assez éléments. Je présume que la règle CSS fonctionne sur chrome et pas sur firefox.

Excuse-moi, en fait j’avais pas encore essayé mais effectivement, sur chromium il n’y a pas ce problème.

Sinon, oui ce bug est présent sur quasiment tous les sites web, mais il en a certains dont ZdS où c’est normal

Ta correction n’a pas dû fonctionner car il y a un problème de priorité :

  • Soit tu as mis tes règles CSS de correction avant ton CSS actuel ;
  • Soit tu n’avais pas un chemin CSS prioritaire pour que tes règles s’appliquent en dernière et ainsi donner la priorité à ces nouvelles règles.
A-312

Désolé, je connais rien en CSS, du coup je comprends pas ce que tu veux dire dans ton deuxième point :/

Sinon voici le contenu de mon userContent.css, ça peut être utile ;) À noter qu’il est déjà rempli pour résoudre le problème avec les thèmes sombres décrit ici

input {
border: 2px inset white;
background-color: white;
color: black;
-moz-appearance: none !important;
}
textarea {
border: 2px inset white;
background-color: white;
color: black;
-moz-appearance: none !important;
}
select {
border: 2px inset white;
background-color: white;
color: black;
-moz-appearance: none !important;
}
input[type="radio"],
input[type="checkbox"] {
    border: 2px inset white !important;
    background-color: white !important;
    color: ThreeDFace !important;
}
 
*|*::-moz-radio {
    background-color: white;
}
}
button,
input[type="reset"],
input[type="button"],
input[type="submit"] {
border: 2px outset white;
background-color: #eeeeee;
color: black;
-moz-appearance: none !important;
}
body {
background-color: white;
color: black;
display: block;
margin: 8px;
-moz-appearance: none !important;
}

« La Nature est un livre écrit en langage mathématique », Galilée

+0 -0

Au début je pensais que tu codais une page web donc ma réponse est un peu mal adaptée.

Si tu créais et ouvre un fichier html avec : <input type="checkbox" /> tu as le bug ?

Ensuite verifie que la modification est bien prise en compte avec un : background: red !important;.

Si tu vois un fond rouge ça veut dire que tu dois améliorer le CSS, sinon ça veut dire que ta modification n’est pas prise en compte.

Édité par A-312

+0 -0

Vu la forme de tes checkbox, je pense qu’il s’agit d’un problème de taille.

Essaie de jouer avec les propriétés CSS width et height des checkbox.

Ils ne savaient pas que c’était impossible alors ils l’ont fait Mark Twain

+0 -0
Auteur du sujet

Si tu créais et ouvre un fichier html avec : <input type="checkbox" /> tu as le bug ?

Oui.

Ensuite verifie que la modification est bien prise en compte avec un : background: red !important;.

Je vois du rouge si je vais sur about:blank, ie une page blanche. Sinon le fond est normal (j’ai fait la modif dans body).

Vu la forme de tes checkbox, je pense qu’il s’agit d’un problème de taille.

Essaie de jouer avec les propriétés CSS width et height des checkbox.

amael

Ok, j’essaye ça tout de suite ;)

Édit : c’est pas ça, si je les fait en plus grosse (50px) ça fait de gros carrés blancs qui ne change pas si la case est cochée ou pas. :/

Édité par LudoBike

« La Nature est un livre écrit en langage mathématique », Galilée

+0 -0
Auteur du sujet

Ça marche… mais que sur les checkbox toutes seule, celle en liste comme dans l’exemple mis plus haut ou des choix oui/non ne change pas :/

« La Nature est un livre écrit en langage mathématique », Galilée

+0 -0

As-tu essayé de changer de thème GTK (je vois que tu es sous Linux d’après les tags) ?

Parce que les checkboxes prennent l’apparence du thème GTK3 dans Firefox, par défaut, sous Linux. Et des fois, ça fait des trucs bizarres. Et quand la checkbox est stylisée par le site, ça override celle par défaut, ce qui expliquerait que sur certains sites elles soient correctes.

Édité par Breizh

Breizh eo ma bro, hag ihuel eo ma c’halon geti. Da viken. — L’oiseau imaginaire : ZzxŷxzZ

+0 -0
Auteur du sujet

As-tu essayé de changer de thème GTK (je vois que tu es sous Linux d’après les tags) ?

Parce que les checkboxes prennent l’apparence du thème GTK3 dans Firefox, par défaut, sous Linux. Et des fois, ça fait des trucs bizarres. Et quand la checkbox est stylisée par le site, ça override celle par défaut, ce qui expliquerait que sur certains sites elles soient correctes.

Breizh

Je suis passé sur le thème xfce4 avec lxappearrance puis j’ai redémarré mais ça n’a rien changé. Ce qui est vraiment étrange c’est que j’ai la même configuration (i3wm, arc-dark-theme) sur mon pc fixe mais le problème ne s’y présente pas.

Ça marche… mais que sur les checkbox toutes seule, celle en liste comme dans l’exemple mis plus haut ou des choix oui/non ne change pas :/

LudoBike

Tu peux nous donner le html de celle ci-dessus ?

A-312

Oui, le l’ai récupéré ici :

<body>
<fieldset>
  <legend>Choose your interests</legend>
  <div>
    <input type="checkbox" id="coding" name="interest[]" value="coding">
    <label for="coding">Coding</label>
  </div>
  <div>
    <input type="checkbox" id="music" name="interest[]" value="music">
    <label for="music">Music</label>
  </div>
</fieldset>
</body>

« La Nature est un livre écrit en langage mathématique », Galilée

+0 -0
Auteur du sujet

Cette réponse a aidé l’auteur du sujet

En fin de compte j’ai simplement supprimé et recréé mon profil Firefox et tout roule comme sur des roulettes donc c’est bon :)

« La Nature est un livre écrit en langage mathématique », Galilée

+0 -0

Cette réponse a aidé l’auteur du sujet

en fait c’est un vieux bug (radio,scrollbars,…) firefox avec gtk qui touche uniquement les themes linux sombre, il existe un fix dans about:about:config ajouter la clé widget.content.gtk-theme-override et "forcer" un thème gtk clair dans valeur

+1 -0
Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte