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 38369 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 3 janvier 2025 - 13 sept. 2021 à 11:27
jordane45 Messages postés 38369 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 3 janvier 2025 - 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
- Excel cellule couleur si condition texte - Guide
3 réponses
jordane45
Messages postés
38369
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
3 janvier 2025
4 722
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
38369
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
3 janvier 2025
4 722
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
38369
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
3 janvier 2025
4 722
>
jordane45
Messages postés
38369
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
3 janvier 2025
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