Streaming live at 10am (PST)

How to use radio button as rating?


#1

How to add star rating using radio button or do we have any other option? Just an static with no interaction.


#2

Hide radio option, style labels.

input[type='radio'] {
  display: none;
}
input[type='radio'] + label {
  /* custom radio background/padding/etc. */
}
input[type='radio']:checked ~ label {
  /* custom radio background/padding/etc. */
}

You also have to place the radios in reverse order and float them, as CSS can only select elements after, not before (e.g.: + and ~)


#3

do you have sample output for this one?


#4

No, it will take approx 2 hours to make this. My time is not free.


#5

ok, but do you know any plugins i can use for ratings/star that this site is using? http://survey.match3win.com/survey/usvi maybe i can just use a plugin


#6

This site did the star using custom JavaScript. Even the hover state. No CSS involved.

http://survey.match3win.com/survey/js/general.js


#7

Oh, now im afraid with the codes :sweat_smile:


#8

Well the way the rating script was written, I'm guessing it is done about 10 years ago, or perhaps the developer is just horrible. CSS should be used where possible, to minimize the amount of JavaScript needed.


#9

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.