Discussion :

[laurentSc]

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
encadrer
{
    border: 2px black solid;
}

[laurentSc]

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

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

[laurentSc]

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

[laurentSc]

Nouvelle idée mais encore pas bon :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[SpaceFrog]

et le !impottant ?

[laurentSc]

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 ?

[SpaceFrog]

Virer WordPress ?

[laurentSc]

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Il faut trouver autre chose.

[laurentSc]

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

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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