Guest User

Untitled

a guest
Mar 18th, 2018
97
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.79 KB | None | 0 0
  1. html
  2.  
  3. <h1>Rating stars with CSS (all new browsers and IE 8+</h1>
  4.  
  5. <!--[if lte IE 7]><style>#reviewStars-input{display:none}</style><![endif]-->
  6.  
  7. <div id="reviewStars-input">
  8. <input id="star-4" type="radio" name="reviewStars"/>
  9. <label title="gorgeous" for="star-4"></label>
  10.  
  11. <input id="star-3" type="radio" name="reviewStars"/>
  12. <label title="good" for="star-3"></label>
  13.  
  14. <input id="star-2" type="radio" name="reviewStars"/>
  15. <label title="regular" for="star-2"></label>
  16.  
  17. <input id="star-1" type="radio" name="reviewStars"/>
  18. <label title="poor" for="star-1"></label>
  19.  
  20. <input id="star-0" type="radio" name="reviewStars"/>
  21. <label title="bad" for="star-0"></label>
  22. </div>
  23.  
  24. sass
  25.  
  26. #reviewStars-input input:checked ~ label, #reviewStars-input label, #reviewStars-input label:hover, #reviewStars-input label:hover ~ label
  27. background: url('../images/your_reviews__star_iconset.png') no-repeat
  28.  
  29. #reviewStars-input
  30. overflow: hidden
  31. *zoom: 1
  32. position: relative
  33. float: left
  34.  
  35. #reviewStars-input input
  36. filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0)
  37. opacity: 0
  38. width: 16px
  39. height: 16px
  40. position: absolute
  41. top: 0
  42. z-index: 0
  43.  
  44. #reviewStars-input input:checked ~ label
  45. background-position: -16px 0
  46. height: 16px
  47. width: 16px
  48.  
  49. #reviewStars-input label
  50. background-position: 0 0
  51. height: 16px
  52. width: 16px
  53. float: right
  54. cursor: pointer
  55. margin-right: 10px
  56. position: relative
  57. top: 12px
  58. left: -30px
  59. z-index: 1
  60.  
  61. #reviewStars-input label:hover, #reviewStars-input label:hover ~ label
  62. background-position: -16px 0
  63. height: 16px
  64. width: 16px
  65. #reviewStars-input #star-0
  66. left: 0px
  67. #reviewStars-input #star-1
  68. left: 53px
  69. #reviewStars-input #star-2
  70. left: 106px
  71. #reviewStars-input #star-3
  72. left: 159px
  73. #reviewStars-input #star-4
  74. left: 212px
  75. #reviewStars-input #star-5
  76. left: 265px
Add Comment
Please, Sign In to add comment