Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- CSS
- #reviewStars-input input:checked ~ label, #reviewStars-input label,
- #reviewStars-input label:hover, #reviewStars-input label:hover ~ label {
- background: url('http://positivecrash.com/wp-content/uploads/ico-
- s71a7fdede6.png') no-repeat;}
- #reviewStars-input {
- overflow: hidden;
- zoom: 1;
- position: relative;
- float: left;}
- #reviewStars-input input {
- opacity: 0;
- width: 43px;
- height: 40px;
- position: absolute;
- top: 0;
- z-index: 0;}
- #reviewStars-input input:checked ~ label {
- background-position: 0 -40px;
- height: 40px;
- width: 43px;}
- #reviewStars-input label {
- background-position: 0 0;
- height: 40px;
- width: 43px;
- float: right;
- cursor: pointer;
- margin-right: 10px;
- position: relative;
- z-index: 1;}
- #reviewStars-input label:hover, #reviewStars-input label:hover ~ label {
- background-position: 0 -40px;
- height: 40px;
- width: 43px;}
- #reviewStars-input #star-0 {
- left: 0px;}
- #reviewStars-input #star-1 {
- left: 53px;}
- #reviewStars-input #star-2 {
- left: 106px;}
- #reviewStars-input #star-3 {
- left: 159px;}
- #reviewStars-input #star4 {
- left: 212px;}
- #reviewStars-input #star-5 {
- left: 265px;}
- Html
- <div id="reviewStars-input">
- <input id="star4" type="radio" name="reviewStars" />
- <label title="5" for="star4"></label>
- <input id="star-3" type="radio" name="reviewStars"/>
- <label title="4" for="star-3"></label>
- <input id="star-2" type="radio" name="reviewStars"/>
- <label title="3" for="star-2"></label>
- <input id="star-1" type="radio" name="reviewStars"/>
- <label title="2" for="star-1"></label>
- <input id="star-0" type="radio" name="reviewStars"/>
- <label title="1" for="star-0"></label>
- </div>
- JS
- window.onload = function(){
- if (localStorage.getItem('startr')!==null)
- var image = localStorage.getItem('startr');
- document.getElementsByTagName('star-1')[0].style.background = image;
- document.getElementById('star4').onclick = function(){
- console.log('work');
- document.getElementsByTagName('star4')[0].style.background =
- 'http://positivecrash.com/wp-content/uploads/ico-s71a7fdede6.png';
- localStorage.setItem('startr','http://positivecrash.com/wp-
- content/uploads/ico-s71a7fdede6.png');
- }
- }
Add Comment
Please, Sign In to add comment