Changer la couleur d'une div en fonction de la valeur de l'input
Joelle
-
jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention -
jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention -
Bonjour,
J'ai une div avec une image un titre et 3 boutons radios avec des valeurs oui, non, ne_sais_pas.
Comment faire pour que selon la valeur de l'input oui par exemple la div soit en background vert.
Je ne veux pas que se soit au click car le tout est envoyé en bdd
J'espère avoir été assez clair
Merci d'avance pour vos réponses
J'ai une div avec une image un titre et 3 boutons radios avec des valeurs oui, non, ne_sais_pas.
Comment faire pour que selon la valeur de l'input oui par exemple la div soit en background vert.
Je ne veux pas que se soit au click car le tout est envoyé en bdd
J'espère avoir été assez clair
Merci d'avance pour vos réponses
Configuration: Android / Chrome 93.0.4577.62
3 réponses
-
Bonjour
Si tu ne veux pas que ça soit au clic, alors à quel moment ça doit apparaître en vert ?
-
C'est un formulaire qui est modifiable à chaque instant. Il y a 40 div avec 3 inputs dedans. Apr défaut c'est sur "ne sais pas". Le fait de le faire apparaître au clic c'est bien mais des qu'il va envoyer le formulaire ça actualise la page donc il sera plus vert. Ma requête PHP SQL coche le bon bouton selon son dernier choix. Donc je veux que si l'utilisateur a choisi je veux qu'il reste vert tout le temps. Du moment où il clique (ça j'ai su faire) mais également a chaque lecture de ma base
- Et bien tu peux le gérer avec du CSS
Il suffit de regarder si ta checkbox et checked
https://developer.mozilla.org/fr/docs/Web/CSS/:checked
-
-
-
J'ai bien essayé mais il se passe rien :(
Je vous mets un bout de code, si vous avez une idée.. :
<?php foreach ($list_entrees as $entree):?> <div id="<?php echo $entree->id_dish ?>"class="dishes"> <h3><?php echo $entree->dish_name ?></h3> <img src="<?php echo $dir_img_dishes.$list_category[0]->category_root.'/'.$entree->dish_root.$ext_img?>" alt="<?php echo $entree->dish_name?>" > <div id="<?php echo $entree->id_dish ?>" class="form-check"> <input class="form-check-input found" id="<?php echo $entree->dish_name?>" name="<?= $entree->id_dish?>" type="radio" value='oui' <?php if ($user){if ($entree->choix=='oui'){ echo 'checked="checked"';}}?>>Oui <label class="form-check-label" for=""></label> <input class="form-check-input not-found" id="<?php echo $entree->dish_name?>" name="<?= $entree->id_dish?>" type="radio" value='non' <?php if ($user){if ($entree->choix=='non'){ echo 'checked="checked"';}}?>>Non <label class="form-check-label" for=""></label> <input class="form-check-input" id="<?php echo $entree->dish_name?>" name="<?= $entree->id_dish?>" type="radio" value='ne_sais_pas' <?php if ($user){if ($entree->choix != 'oui' && $entree->choix != 'non') { echo 'checked="checked"';}}?>>Je ne sais pas <label class="form-check-label dont-know" for=""></label> </div> </div> <?php endforeach; ?>
Et pour le css :
.found:checked ~ * div.dishes{ border : 2px solid green; background-color : rgb(0, 255, 0); } .not-found:checked ~ * div.dishes{ border : 2px solid rgb(116, 0, 0); background-color : red; }.dont-know:checked ~ * div.dishes{ border : 2px solid rgb(0, 0, 121); background-color : blue; }
J'espere que vous pourrez m'aider-
As tu bien vidé ton cache ?
As tu testé sans l'attribut :checked pour voir si ton css est pris en compte ?
As tu examiné le code source de la page via ton navigateur pour voir quel css était pris en compte ?- Je pense que ton css n'est pas bon au passage ...
Vu que c'est sur le "parent" que tu veux affecter la couleur, le CSS4 (pas encore officiel) dispose d'un selecteur "has()"
Mais bon, le plus simple serait simplement d'assigner une class à ta div en fonction du choix ..
un truc du genre :<?php foreach ($list_entrees as $entree): $classDivChoix = ""; $yesChecked=""; $noChecked=""; $neitherChecked=""; if ($user){ switch($entree->choix){ case "oui" : $classDivChoix = "found-checked"; $yesChecked = 'checked="checked"'; break; case "not" : $classDivChoix = "not-found-checked"; $noChecked = 'checked="checked"'; break; default : $classDivChoix = "neither-checked"; $neitherChecked = 'checked="checked"'; break; } } ?> <div id="<?php echo $entree->id_dish ?>"class="dishes <?php echo $classDivChoix;?>"> <h3><?php echo $entree->dish_name ?></h3> <img src="<?php echo $dir_img_dishes.$list_category[0]->category_root.'/'.$entree->dish_root.$ext_img?>" alt="<?php echo $entree->dish_name?>" > <div id="<?php echo $entree->id_dish ?>" class="form-check"> <input class="form-check-input found " id="<?php echo $entree->dish_name?>" name="<?= $entree->id_dish?>" type="radio" value='oui' <?php echo $yesChecked;?>>Oui <label class="form-check-label" for=""></label> <input class="form-check-input not-found" id="<?php echo $entree->dish_name?>" name="<?= $entree->id_dish?>" type="radio" value='non' <?php echo $noChecked;?>>Non <label class="form-check-label" for=""></label> <input class="form-check-input" id="<?php echo $entree->dish_name?>" name="<?= $entree->id_dish?>" type="radio" value='ne_sais_pas' <?php echo $neitherChecked;?>>Je ne sais pas <label class="form-check-label dont-know" for=""></label> </div> </div> <?php endforeach; ?>
et le css.found-checked{ border : 2px solid green; background-color : rgb(0, 255, 0); } .not-found-checked{ border : 2px solid rgb(116, 0, 0); background-color : red; }.neither-checked{ border : 2px solid rgb(0, 0, 121); background-color : blue; }
-
