[RÉGLÉ] Class CSS pour un champ select !

[GraphiqueDesign]

Bonjour et bon dimanche à tous,
Depuis ce matin, je me casse la tête avec un problème de CSS.
J'ai défini une class pour un formulaire.

.visformstext[type="text"], .visformstext[type="email"], select {
    width: 100%;
}

le champ texte et le champ courriel s"affiche correctement, c'est parfait.
Le champ de sélection s'affiche correctement aussi mais tous les autres champs de sélection du site subissent le width à 100% aussi !

En fait, je ne trouve pas la syntaxe exacte pour refiler une class css à mon champ select.
À défaut de la solution, quelqu'un aurait une url où je pourrais trouver de l'info ?
Je donne un like au premier qui répond !

[ybezier]

Bonjour,

J'ai trouvé une ruse en mettant après mon select dans la partie html : <div style="clear:both;"></div>
Ce n'est peut être pas très CSS mais ça fonctionne dans mon cas.

Yvo

[lomart]

Bonsoir GD,

Il faut cibler plus précisément. Sans le code, difficile de répondre.
Dans le principe, il faut ajouter un attribut du champ. Exemple (non testé) :

.visformstext[type="text"][name="xxx"] {
     width: 100%; }

[GraphiqueDesign]

Je trouve des choses sur le Web, visiblement, je ne suis pas seul à me prendre la tête avec select !
Même des solutions utilisant Javascript !
J'ai essayé plein d'écritures différentes en intégrant bien entendu ta proposition @Iomart mais ça ne donne pas.
C"est pas très propre mais j'ai finalement réussi à forcer le champ select du vote de mon template sur les article à un width de 35% en jouant sur les CSS existant. C'était surtout lui qui m'explosait la présentation des pages où il figure.
Pas grave, avec l'expérience que j'ai acquis, je vais bientôt commencer à travailler la nouvelle version du site pour Joomla 4 sur des bases + clean !
Merci à vous deux, bon début de semaine !

[lomart]

Bonjour,

J'ai essayé plein d'écritures différentes en intégrant bien entendu ta proposition @Iomart mais ça ne donne pas

N'ayant pas ton code, je viens de tester sur leur page de démo https://www.vi-solutions.de/en/demo-registration-form.
Le code suivant modifie bien uniquement le champ last name

#visform9 [type="text"][name="form9last-name"] {
    background-color: yellow;
    width: 50%;
}

le nom étant unique, il est aussi possible d'utiliser : input[name="form9last-name"] {...}

Bonne journée

[GraphiqueDesign]

Merci Iomart, je vais allez regarder ça. Mais je doute un peu car dans les réglages du formulaire, on a le réglage par défaut (ce qui correspond visiblement à la page que tu indiques) et le réglage boostrap qui visiblement reprend les CSS présents dans le site. C'est ce dernier que j'utilise car il m'affiche mon formulaire à l'identique de ce que faisait Breezingforms. Mais je vais quand même jeter un œil et te dire. Merci !

[lomart]

Tu cherches à cibler un élément pour lui appliquer une propriété CSS. C'est bien ça ?

Si oui, le framework CSS utilisé n'a aucune importance. La seule chose utile est de connaitre les attributs (au sens large) généré par le PHP en HTML.

[GraphiqueDesign]

Hello Iomart,
J'ai mis un peu de temps avant de répondre, en fait j'aurai voulu trouver par moi-même via les infos que tu m'as donné.
J'ai donc fouillé le html et fait des essais avec les différents select id, name et class mais je n'arrive pas à pas à modifier l'affichage de ces champs select.
Je te mets le code html généré pour les 2 champs select en question :

<div class="fc-tbxfield4"></div>
<div class="field4 required" aria-required="true">
<label id="modvisform138heurelbl" class=" visformslabel" for="field4">Heure du rendez-vous</label>
<select id="field4" class="visformstext" name="modvisform138heure[]" aria-labelledby="modvisform138heurelbl" aria-required="true" required="required">
<option value="">Choisir ...</option>
<option value="13h00">13h00</option>
<option value="13h30">13h30</option>
<option value="14h00">14h00</option>
<option value="14h30">14h30</option>
<option value="15h00">15h00</option>
<option value="15h30">15h30</option>
<option value="16h00">16h00</option>
<option value="16h30">16h30</option>
<option value="17h00">17h00</option>
<option value="17h30">17h30</option>
<option value="18h00">18h00</option>
<option value="18h30">18h30</option>
<option value="19h00">19h00</option>
</select>
</div>
<div class="fc-tbxfield5"></div>
<div class="field5 required" aria-required="true">
<label id="modvisform138motiflbl" class=" visformslabel" for="field5">Motif du rendez-vous</label>
<select id="field5" class="visformstext" name="modvisform138motif[]" aria-labelledby="modvisform138motiflbl" aria-required="true" required="required">
<option value="">Choisir ...</option>
<option value="besoin d'un devis">J'ai besoin d'un devis</option>
<option value="pour une prestation">Je vous sollicite pour une prestation</option>
<option value="pour une discussion">Je souhaite discuter</option>
<option value="pour une discussion + thé">Je souhaite discuter en buvant un thé</option>
<option value="pour un boulot ou un stage">Je cherche du travail ou un stage</option>
<option value="autre raison">Pour une autre raison</option>
</select>
</div>
<div class="form-actions">
<input id="field6" class="btn " aria-label="Envoyer" value="Envoyer" name="modvisform138envoyer" type="submit">
</div>

En général, je m'en sors un peu avec les CSS mais là je bute totalement, je ne sais pas comment tourner le code afin qu'il soit pris en charge.
Merci si tu as la possibilité de m'enseigner cela.

[lomart]

Je ne comprends pas ce que tu veux faire.
Si je repars de ton code dans ton premier message

 
 .visformstext[type="text"], .visformstext[type="email"], select {     width: 100%; }

cela voudrait dire que tu veux que les select fassent 100% de largeur.
Dans ce cas, ce simple code devrait fonctionner

#field4, #field5 {
    width: 80%;
}

J'ai mis 80% car il faut tenir compte de la classe visformslabel dont je ne connais pas les propriétés.

[GraphiqueDesign]

Bonjour Iomart,
Tu es tout juste perturbant !

J'essayais pour ma part de relier les champs select à une class CSS afin d'en isoler le traitement et du coup, je suis passé bien loin de la simplicité.
Bon, si j'avais un autre champs field4 ou field5 dans mon site, le problème resterait posé mais là, ta solution arrogante de simplicité fonctionne à merveille.
J'aurai appris ici à bien isoler le code html afin de bien cibler l'objet à modifier.
Je te remercie du fond du cœur.
Très cordialement,