Bonjour à tous et à toutes,
Comme je le mettais dans un autre sujet, j'ai une page HTML avec 2 formulaires d'inscription à une newsletter (un dans le corps, l'autre dans le pied de page).
Voici le code HTML du premier formulaire :
Sachant que je ne peux pas intervenir sur le code HTML après <h2>Inscription à la newsletter</h2> (car après c'est appelé dynamiquement grâce à une variable type {%variable%}) je souhaiterai sélectionner le bouton submit de ce premier formulaire afin d'en changer la couleur.
Pour cela, et pour le sélectionner lui et pas celui qui est dans le footer, j'ai entré le CSS suivant :
Quand je calcule la spécificité de ce code CSS j'arrive à un "score" de j'arrive à 2 18 9 (2 ID, 18 classes et 9 éléments ou pseudos-éléments).
Pourtant, bah... rien ne se passe, j'arrive pas à sélectionner ce bouton.
Notez au passage que je demande de sélectionner un id commençant par "node" et une classe commençant par "dp-node" afin que ce soit dynamique car N° de nœud est susceptible de changer.
Savez-vous pourquoi je n'arrive pas à sélectionner ce bouton malgré un bon score de spécificité ? Comment faire pour le sélectionner sans toucher au HTML, en passant par le CSS (voire JS) ?
D'avance merci pour votre réponse.
Bonne journée
Comme je le mettais dans un autre sujet, j'ai une page HTML avec 2 formulaires d'inscription à une newsletter (un dans le corps, l'autre dans le pied de page).
Voici le code HTML du premier formulaire :
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-2">
<div class="agenda">
<h2>L'agenda</h2>
</div>
</div>
<div class="col-md-3">
<div class="newsletter">
<h2>Inscription à la newsletter</h2>
<div id="node-1326" class="dp-node dp-node-newsletter dp-node-1326 clearfix node-item node-newsletter node-item-tagged" data-item-tags="">
<div class="clear"></div>
<h3>Inscrivez-vous</h3>
<hr>
<div class="node-item-content node-item-content-">
<div class="node-item-teaser"></div>
<p></p>
<form id="newsletter" class="form-vertical" enctype="application/x-www-form-urlencoded" action="" method="post">
<div class="form-group">
<label for="newsletters" class="optional">Lettres d'informations auxquelles je souhaite m'inscrire :</label>
<select id="newsletters" name="newsletters[]" multiple="multiple" class="" style="display: none;"></select>
<div class="btn-group">
<button type="button" class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown" title="-- Aucune --" aria-expanded="false"><span class="multiselect-selected-text">-- Aucune --</span> <b class="caret"></b></button>
<ul class="multiselect-container dropdown-menu">
</ul>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#newsletters').multiselect({
nonSelectedText: '-- Aucune --',
includeSelectAllOption: true,
selectAllText: 'Tout sélectionner',
numberDisplayed: 1,
allSelectedText: 'Toutes les lettres',
nSelectedText: 'lettres sélectionnées'
});
});
</script>
</div>
<div class="form-group">
<label for="mail" class="required">Mon adresse e-mail</label>
<div class="input-group" style=""><span class="input-group-addon"><i class="fa fa-at"></i></span>
<input type="email" value="" id="mail" class="form-control " placeholder="" name="mail" required="">
</div>
</div>
<input type="submit" name="submit_newsletter" id="submit_newsletter" value="S'inscrire" class="btn btn-primary">
</form>
<p></p>
</div>
</div>
</div>
</div>
</div>
</div>Sachant que je ne peux pas intervenir sur le code HTML après <h2>Inscription à la newsletter</h2> (car après c'est appelé dynamiquement grâce à une variable type {%variable%}) je souhaiterai sélectionner le bouton submit de ce premier formulaire afin d'en changer la couleur.
Pour cela, et pour le sélectionner lui et pas celui qui est dans le footer, j'ai entré le CSS suivant :
div.container-fluid div.row div.col-md-3 div.newsletter div[id^="node"].dp-node.dp-node-newsletter[class^="dp-node"].clearfix.node-item.node-newsletter.node-item-tagged div.node-item-content.node-item-content- form#newsletter.form-vertical div.form-group input#submit_newsletter.btn.btn-primary {
border: solid 1px #e6e6e6;
background-color: #e3001a !important;
color: white !important;
}Quand je calcule la spécificité de ce code CSS j'arrive à un "score" de j'arrive à 2 18 9 (2 ID, 18 classes et 9 éléments ou pseudos-éléments).
Pourtant, bah... rien ne se passe, j'arrive pas à sélectionner ce bouton.
Notez au passage que je demande de sélectionner un id commençant par "node" et une classe commençant par "dp-node" afin que ce soit dynamique car N° de nœud est susceptible de changer.
Savez-vous pourquoi je n'arrive pas à sélectionner ce bouton malgré un bon score de spécificité ? Comment faire pour le sélectionner sans toucher au HTML, en passant par le CSS (voire JS) ?
D'avance merci pour votre réponse.
Bonne journée
Ça ne risquait pas de marcher, c'est sûr 
