Creating a dynamic star rating system using CSS

A unique code pen project showcasing a pure css star rating interface can be found at: https://codepen.io/yaworek/pen/JJpEaZ

Below is the custom css part:

/***
 *  Custom Pure CSS Star Rating Widget for Bootstrap 4 
 * 
 *  www.TheMastercut.co
 *  
 ***/

@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);

/* Styling headings and links */
h1[alt="Unique"] {color: white;}
a[href], a[href]:hover {color: grey; font-size: 0.5em; text-decoration: none}

.starrating > input {display: none;}  /* Hide radio buttons */

.starrating > label:before { 
  content: "\f005"; /* Star icon */
  margin: 2px;
  font-size: 2em;
  font-family: FontAwesome;
  display: inline-block; 
  text-shadow: 0px 0px 3px #000;
}

.starrating > label
{
  color: #FFFFFF; /* Default color when not selected */
}

.starrating > input:checked ~ label
{ color: #ffca08 ; } /* Yellow color when star is checked */

.starrating > input:hover ~ label
{ color: #ffca08 ;  } /* Yellow color on hover */

This design utilizes both radio buttons and css to showcase the ratings. The goal is to include additional rating sets, such as 5 sets for 5 books. However, the current css setup resets the chosen ratings for one set when selecting ratings for another set.

If interested in exploring an added rating set with this issue, check out the following code pen link: https://codepen.io/brainyprb/pen/BvoqLE

The question arises - Is it possible to resolve this challenge using only css? Or would implementing javascript/jquery be necessary?

javascriptjqueryhtmlcss

Answer №1

Make sure to assign a unique name for each group of star ratings, as demonstrated in the image below Example:

<input type="radio" id="star5" name="rating1" value="5" /><label for="star5" title="5 star">5</label>
        <input type="radio" id="star4" name="rating1" value="4" /><label for="star4" title="4 star">4</label>
.................
<input type="radio" id="stare" name="rating" value="5" /><label for="stare" title="5 star">5</label>
        <input type="radio" id="stard" name="rating" value="4" /><label for="stard" title="4 star">4</label>
......................

See demonstration here

Answer №2

When you nest each div within a separate tag on the HTML side, it will function correctly!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to protect my login details when making an ajax request?

The scenario I am dealing with is as follows: I have developed a website using Javascript where users are required to input a username and password. Subsequently, the site makes an ajax call to the Webserver. On the other end, I have a PHP-powered Webser ...

javascriptphpjqueryajax

Utilizing Jquery ajax for Laravel version 5.6

Why is $request->amount not working on a Laravel controller? What could be causing this issue? I attempted to change it to $request->input('amount'); but still no luck. <script> function getMessage(product_id){ $.ajax({ ...

jqueryajaxlaravel

Transforming PHP shortcode into JQuery functionality

My website is built on Wordpress, and I use javascript to load some of the content. Here's an example: jQuery(".portfolio-fs-slides").css({"display":"none"}).prepend('<div class="portfolio-fs-slide current-slide portfolio-ppreview"><d ...

phpjavascriptjquerywordpressprepend

Adjusting height in Google Maps to fill the remaining space

Currently, I am developing a map application where I want the Google Maps DIV to occupy the remaining height under the header. Here is the code snippet: <!DOCTYPE html> <head> <title>Map Application</title> <style type ...

javascripthtmlcssgoogle-mapsgoogle-maps-api-3

Is it possible to include a value for the "src" attribute rather than the "class" attribute in the array of values in list.js?

Check out the HTML code I wrote: <html> <head> </head> <body> <input class="search" placeholder="Search" /> <div id="users"> <ul class="list"> ...

javascriptjsonlistjs

Creating HTML in Go using data from a struct

I have an HTML file named email.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Shareholder</title> </head> <body> <h1> {{.PageTitle}} </h1> ...

htmlgogo-templates

Showing JSON response on an HTML page using AngularJS

I have limited experience with JavaScript and/or Angular, but I am required to utilize it for a research project. My task involves showcasing the JSON data returned by another component on a webpage. Here is how the process unfolds: When a user clicks on ...

javascriptangularjsangular-ui-router

Version 5.3 of Laravel combined with Vue 2

Working with Vue 2 in a fresh Laravel 5.3 project, I'm faced with a challenge regarding binding a URL in the Laravel format. I've extracted some configuration rows from a database and my goal is to iterate over them to display the data, followed ...

javascriptphplaravelvue.js

Creating a multi-dimensional array in JavaScript with two different sizes

I'm struggling to find the best way to create a multi-dimensional array with varying sizes dynamically. Our user interface requires a pattern where there are rows of 4 items followed by rows of 3 items. This pattern should continue until all contents ...

javascriptarraysmultidimensional-array

The elements in a Cheerio collection do not possess an innerHTML property

When using a cheerio query, I am having trouble locating the innerHTML property on the elements returned. In jQuery, the following code works perfectly, outputting Para 2. const d = $("p","<div><p>Para 1</p> <p>Para ...

jquerycheerio

Unable to change Gutters to 0 in the .container-fluid class in Bootstrap 5.2

I have gone through all the answers related to my question, but I couldn't find a solution for it. Below is the HTML code with Bootstrap 5.2 that I am working on: <section id="title"> <div class="container-fluid"> ...

htmlcsstwitter-bootstrapcss-selectors

Error: Loop Program Encountered Unexpected Token Syntax

Every time I attempt to run this code, a syntax error (unexpected token) appears. As someone who is still learning JavaScript, I am struggling to identify the root cause of this issue. var x = 1; var example = function(){ for(var y = 0; y < ...

javascript

Clear the default content from a Bootstrap modal form

Each object from the 'myData' array is being used to create divs. Additionally, there is a bootstrap modal with a form for adding an external object. Once this external object is added to the array 'myData', it will be displayed in the ...

jqueryarraysobjectbootstrap-modalreset

Using a restricted set of special characters in a jQuery regular expression

My requirement is to only allow alphanumeric data along with the following special characters: ' (single quote) - (hyphen) . (dot) single space I attempted this approach: var userinput = $(this).val(); var pattern = [A-Za-z0-9_~\-!@#\$% ...

javascriptjqueryhtmlregexvalidation

Discovering, storing, and displaying JSON data in JavaScript

I am currently working on a PHP file called rows2.php that displays results from a database by showing the new id of the field in this format: {'new_id':'92'} My goal is to use JavaScript to load this data and add the new_id surrounded ...

javascriptphpjsonajax

Loop within a promise results in undefined

Within my application, there is a function that returns a promise. Inside this function, I wait for an image in the DOM to become available and then extract that element to generate base64 data from it. getCodesOfOneMerchant(merchantDataEntry: MerchantData ...

javascriptangulartypescriptpromiseasync-await

How can CSS be utilized to style the visited links that are hovered over

Is there a way to change the font color specifically for visited hyperlinks that are being hovered over by the mouse? I am trying to achieve this: a:visited:hover {color: red} ...

htmlcssstylesheet

Using a regular expression to replace occurrences of a string in Objective-C

Can someone help me figure out how to use a regex expression to split my string that contains HTML code? NSString* regex = @"<.*?>"; NSString* html = @"<span class="test">Test1</span><span class="test">Test2</span><span cl ...

htmlobjective-cregexnsstring

When I click on my div, the color does not change as expected

Recently, I wrote a code snippet where there are 9 different div elements each assigned a ".spaces" class. The intention was to change the color of these divs upon clicking on them. However, I encountered an issue where only the first div changes its color ...

javascripthtmldomdom-events

Tips for managing both DOM manipulation and state changes at the same time in AngularJS

<div my-custom-directive> <button id="myButton" ng-click="handleClick(mymodel.id)"><button> </div> app.controller('myCtrl', function($scope) { $scope.handleClick = function(id) { //Perform state change here without ...

javascriptangularjsdom