Mettre du CSS dans les formulaires CF7

Bonjour,
sur le site https://test.pasdpanique.fr/etre-rappele/ (un site de test), j'ai changé le thème (WPocean car problème avec Astra), j'ai des formulaires de contact (comme celui de l'URL ci-dessus), mais les champs de saisie sont invisibles. Comment peut-on leur appliquer des règles CSS, comme

Code:

---

1 2 3 4

encadrer { border: 2px black solid; }

---

J'ai trouvé pour ajouter une bordure autour des champs de saisie :

Code:

---

1 2 3 4

form.wpcf7-form input { border: 2px black solid; }

---

Par contre, je voudrais fixer la longueur d'un des champs, et là, je sèche. J'ai essayé

Code:

---

1 2 3 4

form.wpcf7-form input[name="number-851"] { width:100px; }

---

mais ça ne fait rien. Quelqu'un aurait une idée ?

En fait, il ne s'agit pas d'un champ de type input=text, mais d'un champ de type number.

Du coup, j'ai mis ça :

Code:

---

1 2 3 4

form.wpcf7-form select,form.wpcf7-form number { width:100px; }

---

Ca a bien modifié un autre champ qui est du type select mais pas le champ de type number. Comment faudrait-il faire ?

Nouvelle idée mais encore pas bon :

Code:

---

1 2 3 4

.wpcf7 select,.wpcf7 input[type=number] { width:100px; }

---

Cette idée m'est venue en regardant ce codepen : https://codepen.io/nregard/pen/YqVgdg

et le !impottant ?

Bonjour,
je viens seulement d'être dispo pour tester, et désagréable surprise : page not found !
Du coup, je suis retourné sur la page et l'ai remise à jour (et pour être sûr que ça ne vienne pas du contenu, j'ai tout mis en commentaire), mais pareil :(
Comment m'en sortir ?

Virer WordPress ? :aie:

:)
j'ai changé le nom de la page puis suis revenu à son nom d'origine et c'est bon. Va comprendre...

Le !important suffit pas :

Code:

---

1 2 3 4

form.wpcf7-form select,form.wpcf7-form input[type=number] { width:100px!important; }

---

Le select du formulaire est bien affecté donc la règle CSS fonctionne, par contre le champ de type number ne l'est pas...

Code:

---

1 2 3

<label>Code postal : [number number-851 min:0 max:96000] </label>

---

C'est bien un input vu qu'il est encadré et que j'ai aussi cette classe :

Code:

---

1 2 3

form.wpcf7-form input, form.wpcf7-form select{ border: 2px solid black; }

---

Il faut trouver autre chose.

Je viens de réessayer, ayant changé de thème (je sais pas lequel c'était quand j'ai créé cette discussion, mais aujourd'hui c'est Spacious). Ca marche :ccool:

Code:

---

1 2 3 4 5

/* longueur champs CF7 */ form.wpcf7-form select,form.wpcf7-form input[type=number] { width:100px!important; }

---