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 am currently facing an issue with a container that is set to grow within a fixed size container and I need help figuring out how to make the content wrapper element scrollable. Specifically, the flex-grow container houses a div that is larger than the c ...
My Ajax select input dynamically changes the URL without refreshing the page. However, I have encountered an issue where repeated parameters stack in the URL when the select input is changed multiple times: [domain]/find.php?cat=1#pricemin=10&pricem ...
Having some trouble integrating the jQuery TextEditor plugin into my CodeIgniter project. I'm puzzled as to why it's not functioning properly. Just a heads up, my project also utilizes Bootstrap. Can anyone shed some light on why the plugin is fa ...
Is there a way to use color codes instead of typical color names, like #e06666 for red? content.push('<p><div class="color red"></div>Whole Foods Market</p>'); Any suggestions on how to achieve this? ...
I attempted to retrieve data from my database using jQuery AJAX. Below is the code snippet I used: <script> $(document).ready(function(){ function fetch_data(){ $.ajax({ type:"POST", url:"http://localhost:88/phpPoint/select.php", success:function(re ...
What steps should I take to overlay text on an image using Dreamweaver? Similar to the example linked below: https://i.stack.imgur.com/8GvkW.png Below is a snippet of my code: HTML <body> <main> <header> <img src="images/headerimag ...
I am currently using the Bootstrap framework and I am trying to create a popup image with a title, but it only shows the image. I am not sure how to add code in JavaScript to display the title as well. Can someone please assist me? Here is my code: Javas ...
I'm struggling to make HTML5 validation work in conjunction with AngularJS. Instead of displaying the error message, the form is submitted even when a field is required. If anyone has any insights on how to successfully implement HTML5 validation wi ...
Is there a way to disable all buttons within a specific class? I have attempted the following code without success: $("input.myClass").attr('disabled', true); This is how I am trying to implement it: <script type="text/javascript> ...
I utilized jQuery to create an animation effect: http://jsfiddle.net/rxCDU/ UPDATE: Please note that this effect is optimized for Chrome browsers! The animation works correctly, however, the green SPAN element moves out of the red DIV only after the ani ...
Even though I've searched extensively on how to center text horizontally, none of the suggestions have worked for me. I attempted using margin-left: auto, margin-right: auto, and text-align: center for the class nav-center, but none of them had the de ...
I've been experimenting with creating a fade in and out effect for a background image on a website. I've also been attempting to capture the background color of a div and store it in a variable. Here's what I have tried: elem = document.ge ...
When the menu appears on the right side with right: 0;, I change it to right: -200px; when closing it so that the mobile page does not show the menu on the right. My goal is to display the fa-bars symbol when the menu is closed (right: -200px;), and the fa ...
Looking for help with implementing a Star rating Feedback on articles in Visualforce page. Came across some code that seems to fit the bill but facing issues with getting it to work when placed in a file and executed, particularly in Firefox. Any assistanc ...
My CSS skills are not the greatest and I stumbled upon a snippet of code that is puzzling to me. .grid-product__title.grid-product__title--body:hover { text-decoration: underline; } I checked MDN and it usually defines a reusable property, like a vari ...
Initially, I'm feeling a bit confused but I'll try my best to articulate my issue and what I need. Within a div element, there's another div that I want to move left and right only, following the same path as an image when resizing (refer t ...
I've been struggling to resolve an issue with a script that is supposed to scroll down with the page and stop at a specific height. However, right before it reaches the desired point, it temporarily disappears and then reappears. For reference, here& ...
My webpage is having an issue where the footer is overlapping. It seems to be fine on all other pages except for this one. I would prefer not to make any changes to the footer since it's working correctly on other pages. Is there a way to adjust the C ...
Within my panel and panel-body, there are multiple span elements that display dynamically. These spans behave perfectly in Safari and Chrome, wrapping to the next line when needed. However, in Firefox, they overflow strangely. Here are the comparisons: Ch ...
I have a requirement to load a .glb model into three.js by using the GLTFLoader. I was able to successfully create a rotating 3D mesh on a canvas without encountering any errors in the console. However, when I tried to replace it with the .glb model, I enc ...