{"id":2448,"date":"2015-03-09T07:34:43","date_gmt":"2015-03-09T07:34:43","guid":{"rendered":"http:\/\/www.vishmax.com\/en\/?p=2448"},"modified":"2015-05-10T07:11:12","modified_gmt":"2015-05-10T07:11:12","slug":"simple-css3-star-rating-system-demo-with-tutorial","status":"publish","type":"post","link":"https:\/\/www.vishmax.com\/en\/labs\/simple-css3-star-rating-system-demo-with-tutorial\/","title":{"rendered":"Simple CSS3 Star rating system demo with tutorial"},"content":{"rendered":"<p>Here is a simple 5 star rating demo with code which is built on pure CSS (CSS3). Bottom of the explanation code you can find the live demo button. If you think its is useful then please share!<\/p>\n<h2>CSS<\/h2>\n<pre lang=\"css\">\r\n\t\t.wrapper{\r\n\t\t\tfloat:left;\r\n\t\t\twidth: auto;\r\n\t\t\tmargin:8% 0 0 35%;\r\n\t\t}\r\n\t\t.css3-rating-stars,\r\n\t\t.css3-rating-stars label::before{\r\n\t\t\tdisplay: inline-block;\r\n\t\t}\r\n\t\t.css3-rating-stars label:hover,\r\n\t\t.css3-rating-stars label:hover ~ label{\r\n\t\t\tcolor: #06befb;\r\n\t\t}\r\n\t\t.css3-rating-stars *{\r\n\t\t\tmargin: 0;\r\n\t\t\tpadding: 0;\r\n\t\t}\r\n\t\t.css3-rating-stars input{\r\n\t\t\tdisplay: none;\r\n\t\t}\r\n\t\t.css3-rating-stars{\r\n\t\t\tunicode-bidi: bidi-override;\r\n\t\t\tdirection: rtl;\r\n\t\t}\r\n\t\t.css3-rating-stars label{\r\n\t\t\tcolor: #ccc;\r\n\t\t}\r\n\t\t.css3-rating-stars label::before{\r\n\t\t\tcontent: \"\\2605\";\r\n\t\t\twidth: 48px;\r\n\t\t\tline-height: 18px;\r\n\t\t\ttext-align: center;\r\n\t\t\tfont-size: 48px;\r\n\t\t\tcursor: pointer;\r\n\t\t}\r\n\t\t.css3-rating-stars input:checked ~ label{\r\n\t\t\tcolor: #f5b301;\r\n\t\t}\r\n\t\t.css3-rating-disabled{\r\n\t\t\topacity: .50;\r\n\t\t\t-webkit-pointer-events: none;\r\n\t\t\t-moz-pointer-events: none;\r\n\t\t\tpointer-events: none;\r\n\t\t}\t\r\n\r\n<\/pre>\n<h2>HTML<\/h2>\n<pre lang=\"thml\">\r\n\t\t<div class=\"wrapper\">\r\n\t\t<!-- css3-rating-stars -->\r\n\t\t\t<div class=\"css3-rating-stars\">\r\n\t\t\t\t<form>\r\n\t\t\t\t\t<input type=\"radio\" name=\"group-1\" id=\"group-1-0\" value=\"5\" \/>\r\n\t\t\t\t\t<label for=\"group-1-0\"><\/label>\r\n\t\t\t\t\t<input type=\"radio\" name=\"group-1\" id=\"group-1-1\" value=\"4\" \/>\r\n\t\t\t\t\t<label for=\"group-1-1\"><\/label>\r\n\t\t\t\t\t<input type=\"radio\" name=\"group-1\" id=\"group-1-2\" value=\"3\" \/>\r\n\t\t\t\t\t<label for=\"group-1-2\"><\/label>\r\n\t\t\t\t\t<input type=\"radio\" name=\"group-1\" id=\"group-1-3\" value=\"2\" \/>\r\n\t\t\t\t\t<label for=\"group-1-3\"><\/label>\r\n\t\t\t\t\t<input type=\"radio\" name=\"group-1\" id=\"group-1-4\"  value=\"1\" \/>\r\n\t\t\t\t\t<label for=\"group-1-4\"><\/label>\r\n\t\t\t\t<\/form>\r\n\t\t\t<\/div>\r\n\t\t<!-- \/css3-rating-stars -->\r\n\t\t<\/div>\r\n\r\n<\/pre>\n<p><a class=\"external-download\" href=\"http:\/\/vishmax.com\/demos\/css-rating-stars.html\" target=\"_blank\">Live Demo<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Here is a simple 5 star rating demo with code which is built on pure CSS (CSS3). Bottom of the explanation code you can find the live demo button. If you think its is useful then please share! CSS .wrapper{ float:left; width: auto; margin:8% 0 0 35%; } .css3-rating-stars, .css3-rating-stars label::before{ display: inline-block; } .css3-rating-stars [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2588,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[44],"tags":[72,101,94],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.2.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Simple CSS3 Star rating system demo with tutorial - Vishmax.com<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/www.vishmax.com\/en\/labs\/simple-css3-star-rating-system-demo-with-tutorial\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Simple CSS3 Star rating system demo with tutorial - Vishmax.com\" \/>\n<meta property=\"og:description\" content=\"Here is a simple 5 star rating demo with code which is built on pure CSS (CSS3). Bottom of the explanation code you can find the live demo button. If you think its is useful then please share! CSS .wrapper{ float:left; width: auto; margin:8% 0 0 35%; } .css3-rating-stars, .css3-rating-stars label::before{ display: inline-block; } .css3-rating-stars [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"http:\/\/www.vishmax.com\/en\/labs\/simple-css3-star-rating-system-demo-with-tutorial\/\" \/>\n<meta property=\"og:site_name\" content=\"Vishmax.com\" \/>\n<meta property=\"article:published_time\" content=\"2015-03-09T07:34:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2015-05-10T07:11:12+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/www.vishmax.com\/en\/wp-content\/uploads\/2015\/03\/star-rating-400x230.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"400\" \/>\n\t<meta property=\"og:image:height\" content=\"230\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"http:\/\/www.vishmax.com\/en\/labs\/simple-css3-star-rating-system-demo-with-tutorial\/#article\",\"isPartOf\":{\"@id\":\"http:\/\/www.vishmax.com\/en\/labs\/simple-css3-star-rating-system-demo-with-tutorial\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"http:\/\/www.vishmax.com\/en\/#\/schema\/person\/785fa94b56eb17ae7706d30777d6ab93\"},\"headline\":\"Simple CSS3 Star rating system demo with tutorial\",\"datePublished\":\"2015-03-09T07:34:43+00:00\",\"dateModified\":\"2015-05-10T07:11:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"http:\/\/www.vishmax.com\/en\/labs\/simple-css3-star-rating-system-demo-with-tutorial\/\"},\"wordCount\":49,\"publisher\":{\"@id\":\"http:\/\/www.vishmax.com\/en\/#organization\"},\"keywords\":[\"Code Library\",\"Examples\",\"Web Design Tips\"],\"articleSection\":[\"Labs\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"http:\/\/www.vishmax.com\/en\/labs\/simple-css3-star-rating-system-demo-with-tutorial\/\",\"url\":\"http:\/\/www.vishmax.com\/en\/labs\/simple-css3-star-rating-system-demo-with-tutorial\/\",\"name\":\"Simple CSS3 Star rating system demo with tutorial - Vishmax.com\",\"isPartOf\":{\"@id\":\"http:\/\/www.vishmax.com\/en\/#website\"},\"datePublished\":\"2015-03-09T07:34:43+00:00\",\"dateModified\":\"2015-05-10T07:11:12+00:00\",\"breadcrumb\":{\"@id\":\"http:\/\/www.vishmax.com\/en\/labs\/simple-css3-star-rating-system-demo-with-tutorial\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/www.vishmax.com\/en\/labs\/simple-css3-star-rating-system-demo-with-tutorial\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/www.vishmax.com\/en\/labs\/simple-css3-star-rating-system-demo-with-tutorial\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"http:\/\/www.vishmax.com\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Simple CSS3 Star rating system demo with tutorial\"}]},{\"@type\":\"WebSite\",\"@id\":\"http:\/\/www.vishmax.com\/en\/#website\",\"url\":\"http:\/\/www.vishmax.com\/en\/\",\"name\":\"Vishmax.com\",\"description\":\"Software Company in Calicut for Web Design and eCommerce\",\"publisher\":{\"@id\":\"http:\/\/www.vishmax.com\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\/\/www.vishmax.com\/en\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"http:\/\/www.vishmax.com\/en\/#organization\",\"name\":\"Vishmax.com\",\"url\":\"http:\/\/www.vishmax.com\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/www.vishmax.com\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.vishmax.com\/en\/wp-content\/uploads\/2023\/03\/logo-vishmax.png\",\"contentUrl\":\"https:\/\/www.vishmax.com\/en\/wp-content\/uploads\/2023\/03\/logo-vishmax.png\",\"width\":150,\"height\":50,\"caption\":\"Vishmax.com\"},\"image\":{\"@id\":\"http:\/\/www.vishmax.com\/en\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"http:\/\/www.vishmax.com\/en\/#\/schema\/person\/785fa94b56eb17ae7706d30777d6ab93\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/www.vishmax.com\/en\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e218268870406c917d20b442936d9e68?s=96&d=monsterid&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e218268870406c917d20b442936d9e68?s=96&d=monsterid&r=g\",\"caption\":\"admin\"},\"url\":\"https:\/\/www.vishmax.com\/en\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Simple CSS3 Star rating system demo with tutorial - Vishmax.com","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"http:\/\/www.vishmax.com\/en\/labs\/simple-css3-star-rating-system-demo-with-tutorial\/","og_locale":"en_US","og_type":"article","og_title":"Simple CSS3 Star rating system demo with tutorial - Vishmax.com","og_description":"Here is a simple 5 star rating demo with code which is built on pure CSS (CSS3). Bottom of the explanation code you can find the live demo button. If you think its is useful then please share! CSS .wrapper{ float:left; width: auto; margin:8% 0 0 35%; } .css3-rating-stars, .css3-rating-stars label::before{ display: inline-block; } .css3-rating-stars [&hellip;]","og_url":"http:\/\/www.vishmax.com\/en\/labs\/simple-css3-star-rating-system-demo-with-tutorial\/","og_site_name":"Vishmax.com","article_published_time":"2015-03-09T07:34:43+00:00","article_modified_time":"2015-05-10T07:11:12+00:00","og_image":[{"width":400,"height":230,"url":"http:\/\/www.vishmax.com\/en\/wp-content\/uploads\/2015\/03\/star-rating-400x230.jpg","type":"image\/jpeg"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"http:\/\/www.vishmax.com\/en\/labs\/simple-css3-star-rating-system-demo-with-tutorial\/#article","isPartOf":{"@id":"http:\/\/www.vishmax.com\/en\/labs\/simple-css3-star-rating-system-demo-with-tutorial\/"},"author":{"name":"admin","@id":"http:\/\/www.vishmax.com\/en\/#\/schema\/person\/785fa94b56eb17ae7706d30777d6ab93"},"headline":"Simple CSS3 Star rating system demo with tutorial","datePublished":"2015-03-09T07:34:43+00:00","dateModified":"2015-05-10T07:11:12+00:00","mainEntityOfPage":{"@id":"http:\/\/www.vishmax.com\/en\/labs\/simple-css3-star-rating-system-demo-with-tutorial\/"},"wordCount":49,"publisher":{"@id":"http:\/\/www.vishmax.com\/en\/#organization"},"keywords":["Code Library","Examples","Web Design Tips"],"articleSection":["Labs"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"http:\/\/www.vishmax.com\/en\/labs\/simple-css3-star-rating-system-demo-with-tutorial\/","url":"http:\/\/www.vishmax.com\/en\/labs\/simple-css3-star-rating-system-demo-with-tutorial\/","name":"Simple CSS3 Star rating system demo with tutorial - Vishmax.com","isPartOf":{"@id":"http:\/\/www.vishmax.com\/en\/#website"},"datePublished":"2015-03-09T07:34:43+00:00","dateModified":"2015-05-10T07:11:12+00:00","breadcrumb":{"@id":"http:\/\/www.vishmax.com\/en\/labs\/simple-css3-star-rating-system-demo-with-tutorial\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/www.vishmax.com\/en\/labs\/simple-css3-star-rating-system-demo-with-tutorial\/"]}]},{"@type":"BreadcrumbList","@id":"http:\/\/www.vishmax.com\/en\/labs\/simple-css3-star-rating-system-demo-with-tutorial\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/www.vishmax.com\/en\/"},{"@type":"ListItem","position":2,"name":"Simple CSS3 Star rating system demo with tutorial"}]},{"@type":"WebSite","@id":"http:\/\/www.vishmax.com\/en\/#website","url":"http:\/\/www.vishmax.com\/en\/","name":"Vishmax.com","description":"Software Company in Calicut for Web Design and eCommerce","publisher":{"@id":"http:\/\/www.vishmax.com\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/www.vishmax.com\/en\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"http:\/\/www.vishmax.com\/en\/#organization","name":"Vishmax.com","url":"http:\/\/www.vishmax.com\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/www.vishmax.com\/en\/#\/schema\/logo\/image\/","url":"https:\/\/www.vishmax.com\/en\/wp-content\/uploads\/2023\/03\/logo-vishmax.png","contentUrl":"https:\/\/www.vishmax.com\/en\/wp-content\/uploads\/2023\/03\/logo-vishmax.png","width":150,"height":50,"caption":"Vishmax.com"},"image":{"@id":"http:\/\/www.vishmax.com\/en\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"http:\/\/www.vishmax.com\/en\/#\/schema\/person\/785fa94b56eb17ae7706d30777d6ab93","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/www.vishmax.com\/en\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e218268870406c917d20b442936d9e68?s=96&d=monsterid&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e218268870406c917d20b442936d9e68?s=96&d=monsterid&r=g","caption":"admin"},"url":"https:\/\/www.vishmax.com\/en\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/posts\/2448"}],"collection":[{"href":"https:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/comments?post=2448"}],"version-history":[{"count":0,"href":"https:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/posts\/2448\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/media\/2588"}],"wp:attachment":[{"href":"https:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/media?parent=2448"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/categories?post=2448"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/tags?post=2448"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}