Bonjour,
Tester dans codePen avec l'iphone, j'ai des doutes.
J'ai copié ton codePen en local.
J'ai ajouté un bouton pour afficher les rate1 et rate2.
Je n'ai pas mis jQuery et bootstrap.
Le code :
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,user-scalable=yes">
<!--
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
-->
<style>
@import url("http://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css");
/* Basic styles */
fieldset{
}
.row {
text-align: center;
}
.rate {
display: inline-block;
margin: 0;
padding: 0;
border: none;
}
input {
display: none;
}
label {
float: right;
font-size: 0;
color: #d9d9d9;
}
label:before {
content: "\f005";
font-family: FontAwesome;
font-size: 40px;
}
label:hover,
label:hover ~ label {
color: #f6c82c;
transition: 0.2s;
}
input:checked ~ label {
color: #f6c82c;
}
input:checked ~ label:hover,
input:checked ~ label:hover ~ label {
color: #FFED85;
transition: 0.2s;
}
/* Half-star*/
.star-half {
position: relative;
}
.star-half:before {
position: absolute;
content: "\f089";
padding-right: 0;
}
</style>
</head>
<body>
<div class="row">
<fieldset class="rate">
<input id="rate1-star5" type="radio" name="rate1" value="5" />
<label for="rate1-star5" title="Awesome">5</label>
<input id="rate1-star5-half" type="radio" name="rate1" value="4.5" />
<label class="star-half" for="rate1-star5-half" title="Excellent">4.5</label>
<input id="rate1-star4" type="radio" name="rate1" value="4" />
<label for="rate1-star4" title="Very good">4</label>
<input id="rate1-star3-half" type="radio" name="rate1" value="3.5" />
<label class="star-half" for="rate1-star3-half" title="Good">3.5</label>
<input id="rate1-star3" type="radio" name="rate1" value="3" />
<label for="rate1-star3" title="Satisfactory">3</label>
<input id="rate1-star2-half" type="radio" name="rate1" value="2.5" />
<label class="star-half" for="rate1-star2-half" title="Unsatisfactory">2.5</label>
<input id="rate1-star2" type="radio" name="rate1" value="2" />
<label for="rate1-star2" title="Bad">2</label>
<input id="rate1-star1-half" type="radio" name="rate1" value="1.5" />
<label class="star-half" for="rate1-star1-half" title="Very bad">1.5</label>
<input id="rate1-star1" type="radio" name="rate1" value="1" />
<label for="rate1-star1" title="Awful">1</label>
<input id="rate1-star0-half" type="radio" name="rate1" value="0.5" />
<label class="star-half" for="rate1-star0-half" title="Horrific">0.5</label>
</fieldset>
</div>
<div class="row">
<fieldset class="rate">
<input id="rate2-star5" type="radio" name="rate2" value="5" />
<label for="rate2-star5" title="Awesome">5</label>
<input id="rate2-star5-half" type="radio" name="rate2" value="4.5" />
<label class="star-half" for="rate2-star5-half" title="Excellent">4.5</label>
<input id="rate2-star4" type="radio" name="rate2" value="4" />
<label for="rate2-star4" title="Very good">4</label>
<input id="rate2-star3-half" type="radio" name="rate2" value="3.5" />
<label class="star-half" for="rate2-star3-half" title="Good">3.5</label>
<input id="rate2-star3" type="radio" name="rate2" value="3" />
<label for="rate2-star3" title="Satisfactory">3</label>
<input id="rate2-star2-half" type="radio" name="rate2" value="2.5" />
<label class="star-half" for="rate2-star2-half" title="Unsatisfactory">2.5</label>
<input id="rate2-star2" type="radio" name="rate2" value="2" />
<label for="rate2-star2" title="Bad">2</label>
<input id="rate2-star1-half" type="radio" name="rate2" value="1.5" />
<label class="star-half" for="rate2-star1-half" title="Very bad">1.5</label>
<input id="rate2-star1" type="radio" name="rate2" value="1" />
<label for="rate2-star1" title="Awful">1</label>
<input id="rate2-star0-half" type="radio" name="rate2" value="0.5" />
<label class="star-half" for="rate2-star0-half" title="Horrific">0.5</label>
</fieldset>
</div>
<button onclick="showInputState();">Show rates</button>
<script>
function showInputState()
{
var list, k;
list = document.querySelectorAll("[name='rate1']");
for (k=0;k<list.length;k++)
{
if (list[k].checked)
{
alert(list[k].value);
break;
}
}
if (k==list.length) alert("0");
list = document.querySelectorAll("[name='rate2']");
for (k=0;k<list.length;k++)
{
if (list[k].checked)
{
alert(list[k].value);
break;
}
}
if (k==list.length) alert("0");
}
</script>
</body>
</html>
Ça a l'air de fonctionner.
Si je clique sur la 3e étoile de la 1e rangée, les 3 premières étoiles se colorient et restent coloriées.
Si je clique ensuite sur la 2e étoile de la 2e rangée, les 2 premières étoiles de la 2e rangée se colorient.
Les 3 étoiles de la 1e rangée restent coloriées, mais dans un jaune plus foncé.
Si je clique sur mon bouton, il m'affiche bien les alertes avec les bonnes valeurs de rate1 et rate2.
Amicalement,