[CSS] systeme de notation avec 5 etoiles

bonjour a vous

alors je voulai créer un système de notations avec 5 étoiles en css html et en php,

le problème c'est que je n'arrive pas a coloré mon etoile selectionné. ( le bouton radio dessus enpéche cela).

l'ideal serai que si je selectionne la deuxieme etoile ---> létoile 1 et létoile 2 se colore en orange

si je selectionne la troisieme etoile ----> létoile 1 létoile 2 et l'étoile 3 se colore en orange

je vous met mon code.

<html>

<form action="" method="post">
	<div class="note">
		
			<div class="b">★</div>
			<div class="c"><input class="c" type="radio" name="note" id="note-5" value="5"></div>

			<div class="b">★</div>
			<div class="c"><input class="c" type="radio" name="note" id="note-4" value="4"></div>

			<div class="b">★</div>
			<div class="c"><input class="c" type="radio" name="note" id="note-3" value="3"></div>

			<div class="b">★</div>
			<div class="c"><input class="c" type="radio" name="note" id="note-2" value="2"></div>

			<div class="b"><label for="note-1">★</label></div>
			<div class="c"><input class="c" type="radio" name="note" id="note-1" value="1"></div>
		
	</div>

	<input  class="iinput" type="Submit" value="Commander" name="commander">
</form>


<?php

if (isset($_POST["note"]))
{

				switch ($_POST["note"]) 
				{ 
				    case 1: 
				        echo "Vous avez selectionné la note : <b>" . $_POST["note"] . "</b>";
				    break;
				    
				    case 2: 
				        echo "Vous avez selectionné la note : <b>" . $_POST["note"] . "</b>";
				    break;
				    
				    case 3: 
				       echo "Vous avez selectionné la note : <b>" . $_POST["note"] . "</b>";
				    break;
				    
				    case 4: 
				        echo "Vous avez selectionné la note : <b>" . $_POST["note"] . "</b>";
				    break;
				    
				    case 5:
				       echo "Vous avez selectionné la note : <b>" . $_POST["note"] . "</b>";
				    break;
				   
				    default:
				        echo "Désolé, mauvaise saisie";
				}
}

?>

et voici le css

.b{
	color:silver;
	font-size: 250%;
	z-index: 1000;
}

.note{
	margin-left: 100px;
	width: 32px;
	text-decoration: none;
	 -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
	
}

.c{

	z-index: 200000;
	margin-left: 5px;
	margin-top: -30px;
	opacity: 0;
cursor: pointer;
}

réédit

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

je pense avoir trouvé la solution

jai enlever les inputs de dessus les étoiles et jai associé au input des label.

je laisse les input avec une opacité de 0 pour ne pas les voir.

je continu mes tests et je vous met le code si ça marche

réédit

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

Bon ça avance lentement .

jai reussi a coloré les étoiles precedente de celle selectionné... mais létoile séléctionné ne se colore pas du tous.

si vous avez une solution... je vous met le code.

<form ation="" method="post">
	<div class="note">
		
			<label for="note-5" class="labelButon">★</label>
			<input class="c" type="radio" name="note" id="note-5" value="5">
			

			<label for="note-4" class="labelButon">★</label>
			<input class="c" type="radio" name="note" id="note-4" value="4">
			

			<label for="note-3" class="labelButon">★</label>
			<input class="c" type="radio" name="note" id="note-3" value="3">
			

			<label for="note-2" class="labelButon">★</label>
			<input class="c" type="radio" name="note" id="note-2" value="2">
			

			<label for="note-1" class="labelButon">★</label>
			<input class="c" type="radio" name="note" id="note-1" value="1">
			
		
	</div>

	<input  class="iinput" type="Submit" value="Commander" name="commander">
</form>


<?php

if (isset($_POST["note"]))
{

				switch ($_POST["note"]) 
				{ 
				    case 1: 
				        echo "Vous avez selectionné la note : <b>" . $_POST["note"] . "</b>";
				    break;
				    
				    case 2: 
				        echo "Vous avez selectionné la note : <b>" . $_POST["note"] . "</b>";
				    break;
				    
				    case 3: 
				       echo "Vous avez selectionné la note : <b>" . $_POST["note"] . "</b>";
				    break;
				    
				    case 4: 
				        echo "Vous avez selectionné la note : <b>" . $_POST["note"] . "</b>";
				    break;
				    
				    case 5:
				       echo "Vous avez selectionné la note : <b>" . $_POST["note"] . "</b>";
				    break;
				   
				    default:
				        echo "Désolé, mauvaise saisie";
				}
}

?>

et voisi le code css

.b{
	color:silver;
	font-size: 250%;
	z-index: ;
	margin-right: 400px;
	 text-decoration: none;
	
}

.note{
	margin-left: 300px;
	width: 32px;
	text-decoration: none;
	 -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
	
}

.c{

	z-index: 200000;
	margin-left: 5px;
	margin-top: -30px;
	opacity: 0;
	cursor: pointer;
}
	
.labelButon
{
    background-color:white;
    color: silver;
}

input:focus  ~ .labelButon{
	color: orange;
}


</style>

en vous remerciant

voici une photo de la representation du probleme de mon code

on peut voir les deux premiére etoile en orange grace au selecteur css ~

pourtant jai cliquer sur la 3eme etoile ( on voit bien le resultat apres validation de linput)

voila ça doit etre plus clair je pense

réédit

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

miracle voila en relisant la notice sur w3 j'ai trouvé la solution

toute les etoiles passe a lorange au bon moment.

merci tous de meme openclassroom.

-
Edité par romaryc.C 18 juin 2017 à 21:33:23

systeme de notation avec 5 etoiles

[CSS] systeme de notation avec 5 etoiles

Supprimer

Modérer

Signaler le message aux modérateurs