Changer la couleur d'une div en fonction de la valeur de l'input
Fermé
Joelle
-
12 sept. 2021 à 19:05
jordane45 Messages postés 38241 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 septembre 2024 - 13 sept. 2021 à 11:27
jordane45 Messages postés 38241 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 septembre 2024 - 13 sept. 2021 à 11:27
A voir également:
- Changer la couleur d'une div en fonction de la valeur de l'input
- Changer dns - Guide
- Fonction si et - Guide
- Changer la couleur de la barre des taches - Guide
- Changer clavier qwerty en azerty - Guide
- Changer la langue de windows 10 - Guide
3 réponses
jordane45
Messages postés
38241
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 septembre 2024
4 689
12 sept. 2021 à 21:15
12 sept. 2021 à 21:15
Bonjour
Si tu ne veux pas que ça soit au clic, alors à quel moment ça doit apparaître en vert ?
Si tu ne veux pas que ça soit au clic, alors à quel moment ça doit apparaître en vert ?
J'ai bien essayé mais il se passe rien :(
Je vous mets un bout de code, si vous avez une idée.. :
Et pour le css :
J'espere que vous pourrez m'aider
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
jordane45
Messages postés
38241
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 septembre 2024
4 689
13 sept. 2021 à 11:14
13 sept. 2021 à 11:14
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 ?
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 ?
jordane45
Messages postés
38241
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 septembre 2024
4 689
>
jordane45
Messages postés
38241
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 septembre 2024
13 sept. 2021 à 11:27
13 sept. 2021 à 11:27
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 :
et le css
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;
}
12 sept. 2021 à 21:28
Modifié le 12 sept. 2021 à 22:20
Il suffit de regarder si ta checkbox et checked
https://developer.mozilla.org/fr/docs/Web/CSS/:checked