Interactive Rating Card using Vanilla CSS and JS

Community feedback

• 

  IryDev•1,580

  @IryDevPosted over 1 year ago

  Hey @archihalder, well done for completing this challenge 😄

  I will try to answer your questions :

  • Hiding Radio Buttons: Radio buttons can be visually hidden while maintaining their functionality using the layering and opacity technique. This would create a custom look while maintaining the radio button semantics.

  • Using Labels: Use <label> tags to enclose radio buttons and their text content. This will make it easier to select buttons even when clicking text.

  • Custom CSS Styles: Apply custom CSS styles for radio buttons, using properties like border, background, padding, margin, etc.

  Here's an example:

  HTML ;

  <div class="rating-container">
    <input type="radio" id="star5" name="rating" value="5">
    <label for="star5">5 Stars</label>
    
    <input type="radio" id="star4" name="rating" value="4">
    <label for="star4">4 Stars</label>
    
    <input type="radio" id="star3" name="rating" value="3">
    <label for="star3">3 Stars</label>
    
    <input type="radio" id="star2" name="rating" value="2">
    <label for="star2">2 Stars</label>
    
    <input type="radio" id="star1" name="rating" value="1">
    <label for="star1">1 Star</label>
  </div>
  

  CSS :

  .rating-container {
    display: flex;
    align-items: center;
  }
  
  .rating-container input[type="radio"] {
    display: none; /* Hide the default radio buttons */
  }
  
  .rating-container label {
    cursor: pointer;
    margin: 0 5px;
    font-size: 1.2rem;
    color: #999;
  }
  
  .rating-container input[type="radio"]:checked + label {
    color: #ff9800; /* Change color when radio button is checked */
  }
  
  

  I hope you'll find this helpful😄

  Marked as helpful

  1