Integrating CSS star rating into an HTML form

Question

I ve seen a tutorial online - http   www htmldrive net items show 402 CSS-Star-Rating-System - for making a CSS star rating system    On the page they have this code    lt ul class  rating  gt      lt li gt  lt a href     title  1 Star  gt 1 lt  a gt  lt  li gt       lt li gt  lt a href     title  2 Stars  gt 2 lt  a gt  lt  li gt      lt li gt  lt a href     title  3 Stars  gt 3 lt  a gt  lt  li gt      lt li gt  lt a href     title  4 Stars  gt 4 lt  a gt  lt  li gt      lt li gt  lt a href     title  5 Stars  gt 5 lt  a gt  lt  li gt   lt  ul gt    From what I can tell  this is just a list  How would I integrate it into my form  so that the information from the star rating can be submitted to a database  My current code for the form is below     lt p gt Quality lt  p gt    lt input type  radio  name  ratingquality  value  1  gt     lt input type  radio  name  ratingquality  value  2  gt     lt input type  radio  name  ratingquality  value  3  gt     lt input type  radio  name  ratingquality  value  4  gt     lt input type  radio  name  ratingquality  value  5  gt

User · Accepted Answer

This is very easy to use  just copy-paste the code  You can use your own star image in background   I have created a variable var userRating  you can use this variable to get value from stars   Enjoy        x000D   x000D    document  ready function    x000D         Check Radio-box x000D          rating input radio   attr  checked   false   x000D   x000D          rating input   click function      x000D              rating span   removeClass  checked    x000D            this  parent   addClass  checked    x000D          x000D   x000D         input radio   change  x000D        function    x000D          var userRating   this value  x000D          alert userRating   x000D           x000D      x000D   rating   x000D      float left  x000D      width 300px  x000D    x000D   rating span   float right  position relative    x000D   rating span input   x000D      position absolute  x000D      top 0px  x000D      left 0px  x000D      opacity 0  x000D    x000D   rating span label   x000D      display inline-block  x000D      width 30px  x000D      height 30px  x000D      text-align center  x000D      color  FFF  x000D      background  ccc  x000D      font-size 30px  x000D      margin-right 2px  x000D      line-height 30px  x000D      border-radius 50   x000D      -webkit-border-radius 50   x000D    x000D   rating span hover   span label  x000D   rating span hover label  x000D   rating span checked label  x000D   rating span checked   span label   x000D      background  F90  x000D      color  FFF  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt div class  rating  gt  x000D       lt span gt  lt input type  radio  name  rating  id  str5  value  5  gt  lt label for  str5  gt  lt  label gt  lt  span gt  x000D       lt span gt  lt input type  radio  name  rating  id  str4  value  4  gt  lt label for  str4  gt  lt  label gt  lt  span gt  x000D       lt span gt  lt input type  radio  name  rating  id  str3  value  3  gt  lt label for  str3  gt  lt  label gt  lt  span gt  x000D       lt span gt  lt input type  radio  name  rating  id  str2  value  2  gt  lt label for  str2  gt  lt  label gt  lt  span gt  x000D       lt span gt  lt input type  radio  name  rating  id  str1  value  1  gt  lt label for  str1  gt  lt  label gt  lt  span gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Here is how to integrate CSS star rating into an HTML form without using javascript  only html and css    CSS    txt-center       text-align  center     hide       display  none      clear       float  none      clear  both      rating       width  90px      unicode-bidi  bidi-override      direction  rtl      text-align  center      position  relative      rating  gt  label       float  right      display  inline      padding  0      margin  0      position  relative      width  1 1em      cursor  pointer      color   000      rating  gt  label hover   rating  gt  label hover   label   rating  gt  input radio-btn checked   label       color  transparent      rating  gt  label hover before   rating  gt  label hover   label before   rating  gt  input radio-btn checked   label before   rating  gt  input radio-btn checked   label before       content    2605       position  absolute      left  0      color   FFD700      HTML    lt div class  txt-center  gt       lt form gt           lt div class  rating  gt               lt input id  star5  name  star  type  radio  value  5  class  radio-btn hide    gt               lt label for  star5  gt   lt  label gt               lt input id  star4  name  star  type  radio  value  4  class  radio-btn hide    gt               lt label for  star4  gt   lt  label gt               lt input id  star3  name  star  type  radio  value  3  class  radio-btn hide    gt               lt label for  star3  gt   lt  label gt               lt input id  star2  name  star  type  radio  value  2  class  radio-btn hide    gt               lt label for  star2  gt   lt  label gt               lt input id  star1  name  star  type  radio  value  1  class  radio-btn hide    gt               lt label for  star1  gt   lt  label gt               lt div class  clear  gt  lt  div gt           lt  div gt       lt  form gt   lt  div gt    Please check the demo

User · Answer

I m going to say right off the bat that you will not be able to achieve the look they have with radio buttons with strictly CSS   You could  however  stick to the list style in the example you posted and replace the anchors with clickable spans that would trigger a javascript event that would in turn save that rating to your database via ajax    If you went that route you would probably also want to save a cookie to the users machine so that they could not submit over and over again to your database  That would prevent them from submitting more than once at least until they deleted their cookies   But of course there are many ways to address this problem  This is just one of them  Hope that helps

User · Answer

Here is the solution   The HTML    lt div class  rating  gt   lt span gt   lt  span gt  lt span gt   lt  span gt  lt span gt   lt  span gt  lt span gt   lt  span gt  lt span gt   lt  span gt   lt  div gt    The CSS    rating     unicode-bidi  bidi-override    direction  rtl     rating  gt  span     display  inline-block    position  relative    width  1 1em     rating  gt  span hover before   rating  gt  span hover   span before      content    2605      position  absolute      Hope this helps   Source

User · Answer

CSS    rate-container  gt  i       float  right      rate-container  gt  i HOVER   rate-container  gt  i HOVER   i       color  gold      HTML    lt div class  rate-container  gt       lt i class  fa fa-star   gt  lt  i gt       lt i class  fa fa-star   gt  lt  i gt       lt i class  fa fa-star   gt  lt  i gt       lt i class  fa fa-star   gt  lt  i gt       lt i class  fa fa-star   gt  lt  i gt   lt  div gt

User · Answer

How about this  I needed the exact same thing  I had to create one from scratch  It s PURE CSS  and works in IE9  Feel-free to improve upon it   Demo  http   www d-k-j com Articles Web Development Pure CSS 5 Star Rating System with Radios    lt ul class  form  gt       lt li class  rating  gt           lt input type  radio  name  rating  value  0  checked   gt  lt span class  hide  gt  lt  span gt           lt input type  radio  name  rating  value  1    gt  lt span gt  lt  span gt           lt input type  radio  name  rating  value  2    gt  lt span gt  lt  span gt           lt input type  radio  name  rating  value  3    gt  lt span gt  lt  span gt           lt input type  radio  name  rating  value  4    gt  lt span gt  lt  span gt           lt input type  radio  name  rating  value  5    gt  lt span gt  lt  span gt       lt  li gt   lt  ul gt    CSS    form       margin 0      form li       list-style none      hide       display none      rating input type  radio         position absolute      filter alpha opacity 0       -moz-opacity 0      -khtml-opacity 0      opacity 0      cursor pointer      width 17px      rating span       width 24px      height 16px      line-height 16px      padding 1px 22px 1px 0     1px FireFox fix        background url stars png  no-repeat -22px 0      rating input type  radio   checked   span       background-position -22px 0      rating input type  radio   checked   span   span       background-position 0 0

[html] Integrating CSS star rating into an HTML form

Examples related to html

Examples related to css

Examples related to forms

Examples related to rating-system