Guest User

Untitled

a guest
May 23rd, 2018
104
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.07 KB | None | 0 0
  1. CSS
  2. #reviewStars-input input:checked ~ label, #reviewStars-input label,
  3. #reviewStars-input label:hover, #reviewStars-input label:hover ~ label {
  4. background: url('http://positivecrash.com/wp-content/uploads/ico-
  5. s71a7fdede6.png') no-repeat;}
  6.  
  7. #reviewStars-input {
  8. overflow: hidden;
  9. zoom: 1;
  10. position: relative;
  11. float: left;}
  12.  
  13. #reviewStars-input input {
  14. opacity: 0;
  15. width: 43px;
  16. height: 40px;
  17. position: absolute;
  18. top: 0;
  19. z-index: 0;}
  20.  
  21. #reviewStars-input input:checked ~ label {
  22. background-position: 0 -40px;
  23. height: 40px;
  24. width: 43px;}
  25.  
  26. #reviewStars-input label {
  27. background-position: 0 0;
  28. height: 40px;
  29. width: 43px;
  30. float: right;
  31. cursor: pointer;
  32. margin-right: 10px;
  33. position: relative;
  34. z-index: 1;}
  35.  
  36. #reviewStars-input label:hover, #reviewStars-input label:hover ~ label {
  37. background-position: 0 -40px;
  38. height: 40px;
  39. width: 43px;}
  40.  
  41. #reviewStars-input #star-0 {
  42. left: 0px;}
  43.  
  44. #reviewStars-input #star-1 {
  45. left: 53px;}
  46.  
  47. #reviewStars-input #star-2 {
  48. left: 106px;}
  49.  
  50. #reviewStars-input #star-3 {
  51. left: 159px;}
  52.  
  53. #reviewStars-input #star4 {
  54. left: 212px;}
  55.  
  56. #reviewStars-input #star-5 {
  57. left: 265px;}
  58.  
  59. Html
  60. <div id="reviewStars-input">
  61. <input id="star4" type="radio" name="reviewStars" />
  62. <label title="5" for="star4"></label>
  63. <input id="star-3" type="radio" name="reviewStars"/>
  64. <label title="4" for="star-3"></label>
  65. <input id="star-2" type="radio" name="reviewStars"/>
  66. <label title="3" for="star-2"></label>
  67. <input id="star-1" type="radio" name="reviewStars"/>
  68. <label title="2" for="star-1"></label>
  69. <input id="star-0" type="radio" name="reviewStars"/>
  70. <label title="1" for="star-0"></label>
  71. </div>
  72.  
  73. JS
  74.  
  75.  
  76. window.onload = function(){
  77. if (localStorage.getItem('startr')!==null)
  78. var image = localStorage.getItem('startr');
  79. document.getElementsByTagName('star-1')[0].style.background = image;
  80.  
  81. document.getElementById('star4').onclick = function(){
  82. console.log('work');
  83. document.getElementsByTagName('star4')[0].style.background =
  84. 'http://positivecrash.com/wp-content/uploads/ico-s71a7fdede6.png';
  85. localStorage.setItem('startr','http://positivecrash.com/wp-
  86. content/uploads/ico-s71a7fdede6.png');
  87. }
  88. }
Add Comment
Please, Sign In to add comment