What is the best way to create a custom star rating widget using CSS?

Currently, I am developing a rating stars field within a form. Unfortunately, the HTML structure is predetermined by Gravity Forms and cannot be altered. However, I am exploring ways to manipulate it using CSS.

The form layout is set up as follows:

<ul>
    <li>
        <input type="radio" value="5">
        <label>5</label>
    </li>
    <li>
        <input type="radio" value="4">
        <label>4</label>
    </li>
    <li>
        ...
    </li>
</ul>

I have referenced this example for guidance. However, due to this specific structure, the [input/label] elements do not align as siblings with one another.

Is there a way to achieve proper functionality without adjusting the markup directly?

Your assistance is greatly appreciated!

htmlcsswordpress

Answer №1

If you're constrained to use the provided html structure, achieving the desired outcome would require incorporating JavaScript. Assuming that editing the current elements is not an option (if it is, go ahead and make changes), I have integrated this requirement into the JavaScript code. This includes adding necessary attributes as specified.

Check out this link for reference.

In this solution, your list is enclosed within a div element with the class of .rating.

Subsequently, I have updated the inputs and labels with the essential attributes to replicate the example mentioned in your comment. The jQuery's replaceWith method is then utilized to eliminate the list structure, leaving only the inputs and labels, surrounded by the .ratings div.

$(".rating ul li").each(function(i){
  $("input", this).attr({
    "id" : "star"+parseInt(5-i),
    "name" : "rating"
  });
  $("label", this).attr({
    "class": "full",
    "for" : "star"+parseInt(5-i),
    "title" : "Awesome - "+parseInt(5-i)+" stars"
  });
});
replaceIt();
function replaceIt() {
  $(".rating ul").replaceWith(function() {
    return $('input, label', this);
  });
}

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

Combining verification with Recaptcha (or necessary information)

I'm looking to customize a form below by setting certain fields as required based on different conditions. I would like the Name and Email fields to be mandatory, with a popup alert if they are left empty: Name Email If the "Phone" checkbox i ...

phphtmlformsrecaptcharequired

conceal the HTML code from the students

As an instructor of an HTML/CSS course, I often assign tasks that require students to replicate the design of a webpage. However, providing them with direct links to the page makes it easy for them to decipher my methods and simply copy the work. Furthermo ...

htmlcsspdf

Is there a reason the hr tag elements aren't extending to the full width within the list?

I am having trouble with my hr tag elements in the table I created - they are not spanning the full width like the line above them. I have tried adjusting the width property but it doesn't seem to be working. Can anyone offer advice or guidance on how ...

htmlcssbootstrap-5

Currently focusing on improving the responsiveness of the navigation bar and grid layout

I'm facing a new challenge I can't seem to crack: Despite setting my grid boxes to be responsive with 1fr column and (6, fr) row, they are displaying poorly on mobile devices. Additionally, my navbar remains fullwidth and mobile-like even when i ...

htmlcss

Is there a way to retrieve the :hover css style of an anchor using jQuery?

Is it possible to dynamically add :hover effects using jQuery in a CSS stylesheet? Here is a basic example: a.bar { color: green; font-size: 13px; } a.bar:hover { color: purple; font-size: 14px; } How can one access the color and font- ...

jquerycsshoveranchor

Incorporate various components within a loop onto a canvas

I am working with multiple canvas elements: <canvas class="screen" width="250" height="250" data-json="{{json_encode($board)}}"></canvas> Within my JavaScript code, I encounter the following issue: var canvas = document.getElementsByClassNa ...

javascripthtmlcanvas

What is the proper method for utilizing the calc() function in conjunction with min-content?

My grid layout has a specific design that I'd like to simplify. The goal is for the .side element to initially adjust its size based on the content using min-content, but also allow users to expand it by adjusting the --size custom CSS property. I a ...

htmlcssgrid-layout

What is the best way to set a div's size to a constant value?

I recently designed a webpage that includes a feature where clicking a button adjusts the font size within the div. Within the div, there is a ul containing the buttons. However, when the font size changes, the div expands and the nav buttons also shift a ...

csshtmlfixed

Showing local storage on a webpage using Jquery

I have encountered an issue where I can successfully add and remove items from local storage, but the added item does not display on my HTML page. The expected behavior is that when an item is added to local storage, it should be visible on a favorites pag ...

jqueryhtmllocal-storage

Exploring the JSON object and dynamically incorporating elements into it is my goal as I navigate through AngularJS

I'm seeking a way to display the entire JSON data in a tabular format, with the ability to dynamically loop through any additional values that are added. Here is an example of my current JSON: $scope.tableContent = [ { id: 1, ...

javascripthtmlangularjsjson

Add information to the <script> tag

There is a row that I sometimes clone. <script id="SubRow10" type="text/template"> <select id="SubSelect10" class="form-control" name="SubcategorySelect" required> <option value="m,2">Op1</option> <option value="m,3"&g ...

javascriptjqueryhtml

What is the best way to validate a particular class in javascript?

Need help checking if a specific id has a particular class. Unsure of the process? Here's the code snippet where the attempt at checking the id for a specific class is visible within the homeTransition function. function homeTransition() { ...

javascripthtmlcssfunctionclass

Utilizing a relative path in CodeIgniter

I've been encountering a challenge with relative paths while using codeigniter in my app. Let me explain the situation: root/application/views/assets/css/style.css root/application/views/templates/file.php So, in the file.php, I reference style.css ...

phphtmlcsscodeigniter

Ways to remove unwanted line breaks following PHP code within HTML documents

Currently working on building my blog, and I'm facing some challenges with the post div. It seems like every element within is automatically getting line breaks. Despite trying to float them or adjust padding, it's not giving me the desired layou ...

phphtmlcssline-breaks

When attempting to retrieve text using xpath, Selenium will output "[]" as the result

After implementing an extension to validate the correctness of the xpath, I am facing an issue while trying to extract data using selenium. Despite having a supposedly correct xpath, when I print the variable containing the scraped xpath address, I only se ...

htmlseleniumxpathselenium-chromedriver

Tips for integrating PHP with HTML5 while developing a Blackberry native application that utilizes Blackberry websockets

I'm currently working on a basic HTML5 page that includes inline PHP script. I'm looking for advice on how to transform this app so it can be used with Blackberry WebSockets. For example, I want to develop a native app using HTML5. ...

htmlblackberry

Trouble with HTML5 videos not functioning on Apple iOS gadgets

Having trouble playing my HTML5 videos on iOS devices, specifically iPhone 7.0 and iPad 7.0.4. Currently experiencing an issue where the iPad shows only an empty container and the iPhone displays a play button with a line through it. Any thoughts on what m ...

iosiphonehtml.htaccessvideo

Using jQuery, create a variable that combines a text string with a

I have a list with custom bullet icons that I need help modifying using JavaScript. Specifically, I am looking for a script that can identify if the icon name is followed by a number and then add an image tag with a class based on that icon number for each ...

javascriptjqueryhtmlicons

Tips for eliminating the small amount of horizontal scrolling on mobile devices when utilizing viewport width=device-width

My issue involves using the meta tag to set the viewport width to match the device's width: <meta(name='viewport', content='width=device-width, initial-scale=1.0, user-scalable=0;') However, upon loading the page on Chrome for ...

htmlcssmobilescrollviewport

Utilize getElementsByClassName to dynamically alter the appearance of specific elements upon triggering an event

I'm attempting to utilize onmouseover="document.getElementsByClassName().style.background='color'" in order to switch the color of all divs with a specified classname to a different color when hovering over another element on the page. ...

javascriptcssonmouseovergetelementsbyclassname