web-dev-qa-db-fra.com

Cases à cocher n'affichant pas Chrome - Fonctionne dans d'autres navigateurs

Je ne suis pas sûr de ce qui se passe. Il devrait y avoir une case à cocher à gauche de "Remember Me" et deux autres en bas, car j'ai un vélo et une voiture. Ils s'affichent dans Firefox mais pas dans Chrome. Je crois que j'ai un problème CSS mais que je ne le trouve pas? quelqu'un peut-il aider s'il vous plait?

http://www.cloudtute.com/auth

20
user1149620

Cette ligne dans votre CSS:

-webkit-appearance: none;

Dans la règle de style pour input, button, select, textarea, casser des choses pour vous.

27

Je réponds à un niveau plus général à ceux qui se heurtent à ce problème de cases à cocher n'apparaissant pas dans Chrome. Et ont été dirigés ici par Google. Vous pouvez également avoir ce problème dans Safari puisque les deux utilisent actuellement WebKit

Nous avons rencontré ce problème sur notre propre site Web, où les cases à cocher et les entrées radio ne s'affichaient pas correctement. Mais cela a été corrigé en ajoutant ceci à notre CSS.

input[type=checkbox]
{
  -webkit-appearance:checkbox;
}

Maintenant cela fonctionne bien. 

success

Comme vous pouvez le constater, un autre développeur a ajouté -webkit-appearance: none;, comme dans votre cas. Dans notre cas, c'était parce que j'avais commencé avec un thème. 

Mais pour être absolument sûr que les entrées apparaissent, il est prudent de simplement déclarer ces règles dans votre CSS. Dans cette page, j'ai placé les styles dans la balise <style> (ce que je ne recommande pas), mais j'ai pris la capture d'écran alors que j'étais encore en train de tester. La meilleure pratique serait de supprimer les styles en conflit et d’ajouter des styles dans le dossier approprié. 

Ressources supplémentaires:
https://css-tricks.com/almanac/properties/a/appearance/
https://davidwalsh.name/webkit-appearance
Qu'est-ce que WebKit et comment est-il lié au CSS?
https://developer.Apple.com/library/content/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html

30
JGallardo

Vous avez défini la règle de style:

-webkit-appearance: none;

défini pour input, button, select, textarea, vous devez le supprimer et cela fonctionnera.

Vous avez également une erreur JS dans la console: Uncaught ReferenceError: containerz is not defined, vérifiez-la.

5
Irvin Dominin

Si vous donnez une largeur de 0px à une case à cocher dans Firefox, vous pourrez la voir, mais si vous ouvrez le même code dans Chrome, cette case sera invisible.

0
user1813774

Définir la valeur de la case à cocher sur true a fonctionné pour moi

value="true"
0
Jay Star

J'ai eu le même problème… .. Quand j'ai désactivé l'extension Ad-Block, cela a fonctionné!

Ensuite, j'ai ajouté une exception à ce site dans Ad-Block.

0
GEORGE TARANTILS