Star rating css

#hide {
display:none;
}

.rating input {
position:absolute;
filter:alpha(opacity=0);
-moz-opacity:0;
-khtml-opacity:0;
opacity:0;
cursor:pointer;
width:17px;
}

.rating span {
width:24px;
height:16px;
line-height:16px;
padding:1px 22px 1px 0; /* 1px FireFox fix */
background:url(http://www.danielkeithjones.com/Articles/Web_Development/Pure_CSS_5_Star_Rating_System_with_Radios/stars.png) no-repeat -22px 0;
}

/* Change span immediately following the checked radio */

.rating input:checked + span {
background-position:-22px 0;
}

/* Reset all remaining stars back to default background.
This supersedes the above due to its ordering. */

.rating input:checked + span ~ span {
background-position:0 0;
}






Use this link To integrate in php this different from above

http://stackoverflow.com/questions/1987524/turn-a-number-into-star-rating-display-using-jquery-and-css

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s