Feedback Form

<!DOCTYPE html>
<title>My Example</title>

/* --- Star Rating Styles --- */
.star-rating {
    display: flex;
    flex-direction: row-reverse; /* This is the trick */
    justify-content: flex-end;
}
.star-rating input[type="radio"] {
    display: none; /* Hide the actual radio buttons */
}
.star-rating label {
    font-size: 2rem;
    color: #ddd;
    cursor: pointer;
    transition: color 0.2s;
}
/* When a star's radio is checked, color it and all previous stars (because of flex-direction: row-reverse) */
.star-rating input[type="radio"]:checked ~ label,
/* On hover, color the hovered star and all previous ones */
.star-rating label:hover ~ label,
.star-rating label:hover {
    color: #f5c518; /* A nice gold color */
}

/* --- Radio Button Group --- */
.radio-group .radio-option {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}
.radio-group input[type="radio"] {
    margin-right: 10px;
}

/* Submit button styling */
.submit-btn {
    display: block;
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 4px;
    background-color: #007bff;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
}
</style>

<div class="feedback-form-container">
    <form action="#" method="post">
        <fieldset>
            <legend>Rate Your Experience</legend>
            <div class="star-rating">
                <input type="radio" id="star5" name="rating" value="5"><label for="star5" title="5 stars">★</label>
                <input type="radio" id="star4" name="rating" value="4"><label for="star4" title="4 stars">★</label>
                <input type="radio" id="star3" name="rating" value="3"><label for="star3" title="3 stars">★</label>
                <input type="radio" id="star2" name="rating" value="2"><label for="star2" title="2 stars">★</label>
                <input type="radio" id="star1" name="rating" value="1"><label for="star1" title="1 star">★</label>
            </div>
        </fieldset>

<fieldset>
            <legend>How satisfied are you?</legend>
            <div class="radio-group">
                <div class="radio-option">
                    <input type="radio" id="very-satisfied" name="satisfaction" value="very-satisfied">
                    <label for="very-satisfied">Very Satisfied</label>
                </div>
                <div class="radio-option">
                    <input type="radio" id="satisfied" name="satisfaction" value="satisfied">
                    <label for="satisfied">Satisfied</label>
                </div>
                 <div class="radio-option">
                    <input type="radio" id="neutral" name="satisfaction" value="neutral">
                    <label for="neutral">Neutral</label>
                </div>
                 <div class="radio-option">
                    <input type="radio" id="unsatisfied" name="satisfaction" value="unsatisfied">
                    <label for="unsatisfied">Unsatisfied</label>
                </div>
            </div>
        </fieldset>
        
        <fieldset>
            <legend>Comments & Suggestions</legend>
            <div class="form-group">
                <label for="comments" style="display:none;">Comments</label> 
                <textarea id="comments" name="comments" placeholder="Tell us what you think..."></textarea>
            </div>
        </fieldset>
        
        <button type="submit" class="submit-btn">Submit Feedback</button>
    </form>
</div>