Star Rating CSS

/* Star Rating */

#star_rating {
visibility:hidden; /* Hide the div. We’ll unhide it in the javascript */
}
#star_rating div ul {
margin: 0px;
padding: 0px;
width: 150px;
height: 30px;
position: relative;
background: url(https://webtools.ca.gov/javascript/shared/star_rating/rating.gif) top left repeat-x; /* Top star */
}
#star_rating ul li {
list-style-image: none;
list-style-type: none;
padding: 0px;
margin: 0px;
float: left;
}
#star_rating li.current_rating {
background: url(https://webtools.ca.gov/javascript/shared/star_rating/rating.gif) left bottom; /* Bottom star, indicates current rating */
position: absolute;
height: 30px;
display: block;
text-indent: -5000px;
z-index: 1;
}
#star_rating li a {
display: block;
width: 30px;
height: 30px;
text-decoration: none;
text-indent: -5000px;
z-index: 5;
position: absolute;
padding: 0px;
background-image: none;
}
#star_rating li a:hover {
background: url(https://webtools.ca.gov/javascript/shared/star_rating/rating.gif) left center; /* Middle star, hovered */
z-index: 1;
left: 0px;
}
#star_rating a.star_1 {
left: 0px;
}
#star_rating a.star_1:hover {
width: 30px;
}
#star_rating a.star_2 {
left: 30px;
}
#star_rating a.star_2:hover {
width: 60px;
}
#star_rating a.star_3 {
left: 60px;
}
#star_rating a.star_3:hover {
width: 90px;
}
#star_rating a.star_4 {
left: 90px;
}
#star_rating a.star_4:hover {
width: 120px;
}
#star_rating a.star_5 {
left: 120px;
}
#star_rating a.star_5:hover {
width: 150px;
}
#star_rating .star_rating_title {
font-weight:bold;
}
#star_rating #star_rating_temp {
float:right;
}

/* Optional */

#star_rating {
background-image:url(https://webtools.ca.gov/javascript/shared/star_rating/rating_bg_top.gif);
min-height:5.6em;
width:199px;
position:relative;
margin:4px 0;
}
#star_rating .star_rating_extra {
width:199px;
height:6px;
background: transparent url(https://webtools.ca.gov/javascript/shared/star_rating/rating_bg_bottom.gif) bottom left no-repeat;
position:absolute;
bottom:0px;
font-size:1px;
}
#star_rating .star_rating_title {
text-indent: -5000px;
height:24px;
}

#star_rating div ul {
margin-left:22px;
}
#star_rating p {
text-align:center;
margin:0px;
}
#star_rating .star_rating_stats {
font-size:.8em;
color:#777;
padding-bottom:5px;

0 Comments

Submit a Comment