Encountering an issue with a star rating css example when more than one fieldset is added. The current CSS code seems to be working fine, but it fails when multiple instances of the same elements [fieldset] are present. I've been struggling to find a solution for this problem and would like it to work seamlessly without relying on JavaScript/jQuery plugins. Any thoughts or suggestions?
Make sure to give each fieldset a unique name.
fieldset.star {
box-sizing: border-box;
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
position: relative;
margin: 10px auto 10px auto;
}
fieldset.star.star5>label:nth-of-type(even) {
display: none;
}
fieldset.star>input[type="radio"] {
display: none;
}
fieldset.star>label {
display: inline-block;
float: right;
color: rgba(255, 255, 255, .5);
}
fieldset.star>label:before {
display: inline-block;
font-size: 4rem;
padding: .3rem .2rem;
margin: 0;
cursor: pointer;
font-family: FontAwesome;
content: "\f005 ";
/* full star */
}
fieldset.star .half {
color: rgba(255, 255, 255, .1);
}
fieldset.star .half:before {
content: "\f089 ";
/* half star no outline */
position: absolute;
padding-right: 0;
}
/* Click + hover color */
fieldset.star>input:checked~label,
/* color current and previous stars on checked */
fieldset.star>label:hover,
fieldset.star>label:hover~label {
color: #DDBB00;
}
/* color previous stars on hover */
/* Hover highlights */
fieldset.star>input:checked+label:hover,
fieldset.star>input:checked~label:hover,
/* highlight current and previous stars */
fieldset.star>input:checked~label:hover~label,
/* highlight previous selected stars for new rating */
fieldset.star>input:checked~label:hover~input:checked~label
/* highlight previous selected stars */
{
color: #FFD700;
}<fieldset class="star">
<input type="radio" id="rating10" name="answer" value="10"><label for="rating10"></label>
<input type="radio" id="rating9" name="answer" value="9"><label class="half" for="rating9"></label>
<input type="radio" id="rating8" name="answer" value="8"><label for="rating8"></label>
<input type="radio" id="rating7" name="answer" value="7"><label class="half" for="rating7"></label>
<input type="radio" id="rating6" name="answer" value="6"><label for="rating6"></label>
<input type="radio" id="rating5" name="answer" value="5"><label class="half" for="rating5"></label>
<input type="radio" id="rating4" name="answer" value="4"><label for="rating4"></label>
<input type="radio" id="rating3" name="answer" value="3"><label class="half" for="rating3"></label>
<input type="radio" id="rating2" name="answer" value="2"><label for="rating2"></label>
<input type="radio" id="rating1" name="answer" value="1"><label class="half" for="rating1"></label>
</fieldset>
<fieldset class="star">
<input type="radio" id="rating110" name="answer1" value="10"><label for="rating110"></label>
<input type="radio" id="rating19" name="answer1" value="9"><label class="half" for="rating19"></label>
<input type="radio" id="rating18" name="answer1" value="8"><label for="rating18"></label>
<input type="radio" id="rating17" name="answer1" value="7"><label class="half" for="rating17"></label>
<input type="radio" id="rating16" name="answer1" value="6"><label for="rating16"></label>
<input type="radio" id="rating15" name="answer1" value="5"><label class="half" for="rating15"></label>
<input type="radio" id="rating14" name="answer1" value="4"><label for="rating14"></label>
<input type="radio" id="rating13" name="answer1" value="3"><label class="half" for="rating13"></label>
<input type="radio" id="rating12" name="answer1" value="2"><label for="rating12"></label>
<input type="radio" id="rating11" name="answer1" value="1"><label class="half" for="rating11"></label>
</fieldset>I'm not very familiar with PHP so I could use your expertise in coming up with the most efficient and straightforward solution for this specific task. In my directory "path/images/headers," I have multiple header images all cut to the correct size, ea ...
Currently, I am facing an issue with my PHP and AJAX code for posting data without redirecting the page. Surprisingly, the script works perfectly on the login page but not on other pages. The main difference I observed is that the login page uses if (empty ...
So here’s the situation: I have a form with a checkbox for agreeing to the terms of service, and I want to make sure it is checked before proceeding with the donation process. I only have the HTML code and no idea how to implement this functionality. Ide ...
Exploring the Material-UI autocomplete feature for the first time has brought some challenges my way. I am working with usernames, which have a specific length limit but could exceed the space available in the autocomplete view. Upon examining the sandbox ...
Our website features a layout where product listings are displayed on the left side, with the selected product appearing on the right side (all on the same page). Initially, when the page loads, the first product is shown on the right. Upon clicking a new ...
Is there a way to toggle the bottom property of a div when clicking its child anchor tag? <div class="nav" :class="{ 'full-width': isFullWidth }"> <a class="toggle-button" @click="toggleNav"><i class="fa fa-angle-down">< ...
.d1 { height: 10px; } .dd { display: inline-block; overflow: hidden; } .dd1 { display: inline-block; } <div class="d1"> <div class="dd"></div> <div class="dd1"></div> </div> To adjust the layout so that th ...
Can you please help me figure out why the code below is not passing the list element ID to ajax correctly: Here's the HTML: <ul id="tree"> <li><a id="1">Finance</a></li> <li><a id="2">ACC& ...
Currently developing a website that initially hides all elements except for the password box upon loading. Once the user enters the correct password, all webpage elements are revealed. Seeking a solution to keep the elements visible on reload by utilizing ...
Is there a method to wrap the content inside li elements without modifying their width? As an illustration, consider the following structure - <ul> <li>Text Example</li> <li>Text Example</li> <li>Text Exampl ...
Looking to rotate the "VERTICAL_TEXT" (third bootstrap column) by 90 degrees, I attempted the code below: <div class="row"> <div class="col-xs-2" style="background-color: yellow;"> <span>FOO1</span><br/> & ...
Check out my codepen demo showcasing the issue: codepen.io/acusti/pen/mJmVRy Encountering an error when trying to load svg content in Firefox: XML Parsing Error: unclosed token Location: data:image/svg+xml;utf8,<svg%20viewBox='0%200%20120%2 ...
I've been experimenting with converting some divs using border radius and I've almost got it, but sometimes they end up looking like 'eggs' haha. Here is the CSS code I'm using: #div{ /*central div*/ position:absolute; t ...
It is necessary to incorporate the functionality of "save" and "cancel" in the JSP code for this particular form. By selecting "save", the data entered into the form will be submitted to its intended destination. Alternatively, choosing "cancel" will dismi ...
I'm currently working my way through the amazing Rails Tutorial and have encountered a problem with the Navigation bar dropping down into the body of the page, but this issue only seems to occur in Chrome (I'm using Linux, Ubuntu 10.10). I'v ...
I'm struggling to understand a problem in my nested list. When I set the height of LI elements, they end up overlapping each other. Can someone explain why this is happening and suggest a proper way to apply height without causing this overlap effect? ...
Currently, I am working with Spring and AngularJS. I haven't encountered any issues displaying my index.html using Spring in the following way: @RequestMapping(value="/") public String index() { return "/app/index.html"; } Is there a way for me ...
I am facing a straightforward use case where I have an image and a div containing text. The current setting for the div is flex column. My goal is to change the flex setting to row so that the text and image appear side by side. Despite having the corre ...
Hello everyone, I'm a complete beginner when it comes to programming so please be gentle with me on my first question :) I'm trying to put together a simple website with a lightbox gallery, and you can check out what I have so far here. The prob ...
I am currently working on implementing a unique feature using jQuery and CSS. Rather than just inheriting the width, I want to create a magic line that extends to the next index item. Scenario: 1: Hover over Element one ELEMENT ONE ELEMENT TWO ELEM ...