Star Rating Design Using Html Css

Source Code:

<!DOCTYPE html>

<html lang = "en-us">

<style>

body{

    display: flex;

    justify-content: center;

    align-items: center;

    width: 100vw;

    height: 100vh;

    margin: 0;

    padding: 0;

    font-family: "Poppins";

    background: linear-gradient(rgb(255, 39, 39), rgb(70, 70, 255));

}

fieldset{

    display: flex;

    justify-content: space-around;

    align-items: center;

    border-style: solid;

    border-color: black;

    border-width: 10px 25px;

    border-radius: 20px;

    position: relative;

    font-size: 2rem;

    padding: 0;

    margin: 0;

    width: 100px;

    height: 50px;

    background: black;

}

fieldset::before,

fieldset::after{

    content: '★★★★★';

    position: absolute;

    left: 0;

    display: flex;

    letter-spacing: 0.50rem;

    color: white;

}

fieldset::after{

    content: '★';

    color: rgb(0, 255, 21);

    mix-blend-mode: multiply;

}

fieldset:has(input[value='1']:checked)::after{

    content: '★';

}

fieldset:has(input[value='2']:checked)::after{

    content: '★★';

}

fieldset:has(input[value='3']:checked)::after{

    content: '★★★';

}

fieldset:has(input[value='4']:checked)::after{

    content: '★★★★';

}

fieldset:has(input[value='5']:checked)::after{

    content: '★★★★★';

}

label{

    outline: none;

    position: absolute;

    left: -100vw;

}

input{

    position: relative;

    display: block;

    border: none;

    appearance: none;

    font-size: 2rem;

    z-index: 1;

    padding: 1rem;

    margin: 0;

    border: solid 1px transparent;

}

</style>

<body>

<form>

    <fieldset>

        <input type="radio" name="star-1" value="1">

        <label for="star-1">1</label>

        <input type="radio" name="star-2" value="2">

        <label for="star-2">2</label>

        <input type="radio" name="star-3" value="3">

        <label for="star-3">3</label>

        <input type="radio" name="star-4" value="4">

        <label for="star-4">4</label>

        <input type="radio" name="star-5" value="5">

        <label for="star-5">5</label>

    </fieldset>

    </form>

</body>

</html>