Checkbox qui apparaissent mal dans Firefox

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 :

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.

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 sol¹.

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

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

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;
}

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.

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.

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).

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. :/

Si tu essayes ça : https://www.creativejuiz.fr/blog/tutoriels/personnaliser-aspect-boutons-radio-checkbox-css ?

Ç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 :/

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.

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

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.

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>