[Résolu] Barre de recherche - addClass fonctionne mais n'applique pas

Bonjour,

il s'agit d'un problème de spécificité : si tu Inspectes ton input#search (F12), tu verras qu'après clic il y a bien la classe .extend ET que dans le panneau CSS, les 3 déclarations de cette règle sont présentes mais barrées et moins prioritaires que celles ayant pour sélecteur #search.
Comme les propriétés border, width et border-radius sont définies avec le poids / spécificité d'un id, c'est pas un sélecteur de classe qui va prendre le dessus… Ajoute un background: red par exemple et tu verras qu'il est bien appliqué car pas de background(-color) défini sur #search.

Tu peux pour pallier cela :
- ajouter des !important (moche ),
- remplacer le sélecteur par #search.select (le poids d'un id et d'une classe est supérieur à un id seul)
- ou - je te le conseille - ne pas utiliser d'id (edit : en CSS. Ça reste tout à fait recommandable en JS) (tu viens d'en avoir une démonstration : ça fiche le brin). Remplacer une classe par une autre ne pose pas de souci de CSS (en JS il faut faire attention si on veut remplacer / toggleClass 1 ou toutes les classes présentes ou ajouter une classe, par exemple pour ne pas virer .form-error). Si on l'ajoute, les 2 règles font effet et quand une propriété est définie dans les 2 avec la meme spécificité, c'est la dernière écrite qui s'applique (ici .extend viendrait après .search donc pas de souci).
Modifié par Felipe (16 Aug 2019 - 10:39)