Changer la couleur d'une div en fonction de la valeur de l'input
Joelle
-
jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention -
jordane45 Messages postés 38486 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
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 de carte graphique - Guide
- Changer clavier qwerty en azerty - Guide
3 réponses
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
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 ?
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;
}
Il suffit de regarder si ta checkbox et checked
https://developer.mozilla.org/fr/docs/Web/CSS/:checked