Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- html
- <h1>Rating stars with CSS (all new browsers and IE 8+</h1>
- <!--[if lte IE 7]><style>#reviewStars-input{display:none}</style><![endif]-->
- <div id="reviewStars-input">
- <input id="star-4" type="radio" name="reviewStars"/>
- <label title="gorgeous" for="star-4"></label>
- <input id="star-3" type="radio" name="reviewStars"/>
- <label title="good" for="star-3"></label>
- <input id="star-2" type="radio" name="reviewStars"/>
- <label title="regular" for="star-2"></label>
- <input id="star-1" type="radio" name="reviewStars"/>
- <label title="poor" for="star-1"></label>
- <input id="star-0" type="radio" name="reviewStars"/>
- <label title="bad" for="star-0"></label>
- </div>
- sass
- #reviewStars-input input:checked ~ label, #reviewStars-input label, #reviewStars-input label:hover, #reviewStars-input label:hover ~ label
- background: url('../images/your_reviews__star_iconset.png') no-repeat
- #reviewStars-input
- overflow: hidden
- *zoom: 1
- position: relative
- float: left
- #reviewStars-input input
- filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0)
- opacity: 0
- width: 16px
- height: 16px
- position: absolute
- top: 0
- z-index: 0
- #reviewStars-input input:checked ~ label
- background-position: -16px 0
- height: 16px
- width: 16px
- #reviewStars-input label
- background-position: 0 0
- height: 16px
- width: 16px
- float: right
- cursor: pointer
- margin-right: 10px
- position: relative
- top: 12px
- left: -30px
- z-index: 1
- #reviewStars-input label:hover, #reviewStars-input label:hover ~ label
- background-position: -16px 0
- height: 16px
- width: 16px
- #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 #star-4
- left: 212px
- #reviewStars-input #star-5
- left: 265px
Add Comment
Please, Sign In to add comment