The rating stars




The idea

There are many plugins are using Javascript to display the rating, but they are not very flexible and often have to write something of my own. The article explains how you can make the pure CSS ratingno with the output of the selected star (in the example of polusotni). The archive for download also are files in which the rating is made not on the pictures, and using a given symbol to UTF-8 star.

Explanation:

All examples are written using the binding technology of the tag label, the tag input using the standard HTML mechanism (supported since IE7). Yes, there is a feature and it is assign the same id to tag input and label. But usually it does not cause problems. However, thus, it is possible to remove values from input a simple transfer form.

 

The output values of the selected stars

The value for each star is stored in the attribute data-value and the displayed content of the pseudo element :after.

 

The differences between examples 1 and 2

The differences are the coloring on hover and in raster and vector versions. Code draw stars the same, but the selectors backlight different.

 

Rating on raster images

The image consists of 6 plususd. The first two are conventional, the second is hover, third is selected.

What they show depends on the chosen input type="radio".

Code for rendering a bitmap of stars and an output line of the selected stars:

  1. .stars {
  2. position: relative;
  3. height: 23px;
  4. width: 120px;
  5. font-size: 0;
  6. }
  7. input {
  8. display: none;
  9. }
  10. label {
  11. display: inline-block;
  12. height: 23px;
  13. width: 12px;
  14. background-image: url(data:image/png;base64,...);
  15. cursor: pointer;
  16. }
  17. input:checked + label:after {
  18. content: attr(data-value)" / 10";
  19. position: absolute;
  20. right: 0;
  21. bottom: 0;
  22. margin-right: -55px;
  23. font-family: Tahoma;
  24. font-size: 16px;
  25. }

Example No. 1, Example No. 2

 

The rating on the UTF-8 characters

About the same as bitmap images but, without specifics, was not. Indents had to be done in em, as it is difficult to capture the dependence of the width of the height of the font, and the backlight is induced and the selected polosvet implemented change color and text-shadow.

Code draw the symbols of stars and an output line of the selected stars:

  1. .stars {
  2. height: 43px;
  3. width: 180px;
  4. position: relative;
  5. font-size: 0;
  6. }
  7. input {
  8. display: none;
  9. }
  10. label {
  11. display: inline-block;
  12. height: 1em;
  13. width: .4em;
  14. overflow: hidden;
  15. position: relative;
  16. font-family: "Courier", "Consolas";
  17. font-size: 40px;
  18. cursor: pointer;
  19. }
  20. label:before {
  21. content: "★";
  22. position: absolute;
  23. display: block;
  24. top: 0;
  25. line-height: 1;
  26. color: white;
  27. text-shadow: 0 0 3px lightgray;
  28. transition: .1s;
  29. }
  30. label:nth-of-type(2n):before {
  31. left: -.4em;
  32. }
  33. input:checked + label + span:after {
  34. content: attr(data-value)" / 10";
  35. position: absolute;
  36. top: 0;
  37. bottom: 0;
  38. right: 0;
  39. margin-right: -50px;
  40. font-family: Tahoma;
  41. font-size: 20px;
  42. line-height: 40px;
  43. }

Example No. 1, Example No. 2

Live demo
Download ZIP







Found comments - 3






Александр March 30, 2016
Звонил по урокам javascript, хотелось бы методичку по языку получить, ну можно еще и php! Можно мне на ящик: pr-you@yandex.ru
Козлов Андрей February 08, 2016
Спасибо, поправил. "Не ошибается тот, кто ничего не делает" ©
TwirlFog February 06, 2016
...(в примере полузведы)... Исправьте опечатку пожалуйста.
Current text is converted to a smiley
:) :( :0 :@ :# :$ :? :] :[ :} :{ :k :p :x :| :Q :O :S :D :X :C :-) :-( :-0 :-# :-$ :-? :-] :-[ :-} :-{ :-o :-p :-x :-| :-Q :-O :-S :-D :-X :-C :-* :-r :-t :-i :-s :-j :-k :-l :-z :-\ :-/ :-I :-J :-K :-L :-Z ;) ;] ;} ;-) ;-] ;-} =) =( =0 =@ =# =$ =? =] =[ =} ={ =o =p =x =| =Q =O =S =D =X =C
:)

Designer avatar

Gender
Hairs/Hats Mouth
Eyes Glasses
Result