5-Star Rating (No Script)

In the earlier post, I shared how to create Star Rating by using some scripting. In this post, we will create 5-Star rating without using any kind of scripting and also to mention this 5-star rating will work just fine as any other rating. This rating is created by just using some HTML and CSS. To make this rating work fine we have added some pseudo classes in CSS, to make it work fine. These pseudo classes allows to add style effects on hovering, on focussing and even when the stars are checked.

Star Rating
Star Rating

The above image defines layout about how the star rating will appear. There is a 5-star rating. Each star rating has different title value. These star are defined using input tag with radio type. Each of these are floated to left using CSS Float property. When we submit the form, the specific value related to that particular star is forwarded to the server.These stars are enclosed within a fieldset followed by legend tag.

     

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 )

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s