28172 sujets

CSS et mise en forme, CSS3

Changer la valeur selected dans une liste déroulante via du CSS

Bonjour
j’utilise un cms qui par défaut publie un élément.
Voici l'extrait HTML
<div class="form-group dp-field-state">
			<label id="jform_state-lbl" for="jform_state" class="hasPopover" title="" data-content="Définissez l'état de publication." data-original-title="Statut">
	Statut</label>		<select id="jform_state" name="jform[state]" aria-invalid="false">
	<option value="1" selected="selected">Publié</option>
	<option value="0">Non publié</option>
	<option value="2">Archivé</option>
	<option value="-2">Dans la corbeille</option>
</select>
</div>


Hors je voudrai que cet élément soit caché par défaut et positionné sur "non publié"
Pouvez-vous m'indiquez le code CSS à insérer pour réaliser cette opération ?
@+
Modifié par HDcms (18 Dec 2018 - 19:01)
Bonsoir
Bon j'ai changé le titre par une demande peut-être plus clair pour changer la valeur selected dans une liste déroulante via du CSS
<option value="0" selected="selected" >Non publié</option>


Cela me semble difficile vai CSS mais on ne sais jamais vu l'évolution du CSS!
Merci de me confirmer ou de me donner une autre piste pas trop compliqué car c'est un select généré par du code d'un cms (joomla)
@9
Modérateur
Bonjour,

Via css, tu ne pourras pas modifier le html. Tout ce que tu peux faire, c'est modifier l'affichage, et donc par exemple cacher certains éléments. Pour cacher l'option qui pose problème, tu peux mettre dans le css :

option[value="0"] {display:none;}

Pour changer le "selected" et le placer sur une autre <option>, ou changer le "Publié" en "Non publié", je vois un bout de javascript.
Amicalement,
Bonjour
#adminForm > div.com-dpcalendar-locationform__fields.dp-tabs > div.dp-tabs__tab.dp-tabs__tab-publishing > div.form-group.dp-field-state option[value="1"] {display:none;}

Bon ela ne fonctionne pas. Probablement parce que le select est fait avant l'affichage!

Si tu avais le bout de javascript qui va bien sinon je publie un nouveau post ailleurs
@+
Modérateur
Bonjour,

Le select fait(? généré tu veux dire ?) avant affichage ? Comment pourrait-il en être autrement ?

Quoiqu'il en soit, le css doit le faire disparaitre si toutefois l'instruction css est correcte et si elle est effectivement présente dans la page en question (il faudrait le vérifier en regardant via le navigateur le code source).

Pour ce qui est du javascript, et en supposant que le css que tu as donné est correct (y a un doute puisque ça ne marche pas), tu peux essayer :

window.addEventListener("load", function()
  {
    var e, selector;
    selector = '#adminForm';
    selector += ' > div.com-dpcalendar-locationform__fields.dp-tabs';
    selector += ' > div.dp-tabs__tab.dp-tabs__tab-publishing';
    selector += ' > div.form-group.dp-field-state';
    selector += ' option[value="1"]';
    e = document.querySelector(selector);
    // si selector est correct,
    // alors e est l'élément option ayant pour valeur 1
    // contenu dans toute la série de div indiquée dans selector
    if (e) e.style.display = "none";
    else alert("Option non trouvée !");
  }, false);


Amicalement,
Modifié par parsimonhi (20 Dec 2018 - 18:41)
Sujet clos
Aller à