Input radio buttons as clickable numbers, stars or other images - CSS

How can display numbers, stars or other images instead of HTML input radio buttons, using CSS ?

Hi,

To replace input radio buttons with numbers, stars or other images, you have to use a HTML label and hide radio button with display: none;

This CSS solution replaces input radio buttons with numbers. Active number have a different color:

<style>

label {
display: block;
width: 32px;
height: 32px;
color: black;
font-family: arial;
font-size: 15px;
font-weight: normal;
text-align: center;
line-height: 32px;
border-radius: 50%;
margin: 0px 3px;
background-color: #F2F2F2;
cursor: pointer;
float: left;
}

input[type="radio"] {
display:none;
padding: 0px;
margin: 0px;
}

input[type="radio"]:checked + label {
color: white;
background-color: green;
}

</style>

<div>
<input type="radio" id="rating_1" name="rating"><label for="rating_1">1</label>
<input type="radio" id="rating_2" name="rating"><label for="rating_2">2</label>
<input type="radio" id="rating_3" name="rating"><label for="rating_3">3</label>
<input type="radio" id="rating_4" name="rating"><label for="rating_4">4</label>
<input type="radio" id="rating_5" name="rating"><label for="rating_5">5</label>
</div>

To replace input radio buttons with stars or other images, you can use the same solution, but you have to add HTML image into label or into CSS as a background: url('https://www.example.com/star.png');