Rating for ADV

by xylab

HTML

<!-- рейтинг без js -->
<div class="rating">
    <input type="radio" class="rating-radio" id="radio-5" name="rating-1" />
		<label for="radio-5" class="rating-label"></label>
    <input type="radio" class="rating-radio" id="radio-4" name="rating-1" />
		<label for="radio-4" class="rating-label"></label>
    <input type="radio" class="rating-radio" id="radio-3" name="rating-1" />
		<label for="radio-3" class="rating-label"></label>
    <input type="radio" class="rating-radio" id="radio-2" name="rating-1" />
		<label for="radio-2" class="rating-label"></label>
    <input type="radio" class="rating-radio" id="radio-1" name="rating-1" />
		<label for="radio-1" class="rating-label"></label>
</div>

CSS

.rating {
        overflow: hidden;
        display: inline-block;
    }

    .rating-radio {
		display: none;
    }
   
   .rating-label {   
        display: block;
        cursor: pointer;
		float: right;
        width: 16px;
        height: 16px;        
		background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAQCAYAAAAbBi9cAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoxN0UzMEY3QjRBM0MxMUUzOTQ2NzkzMjg1RkNFNjE1QSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoxN0UzMEY3QzRBM0MxMUUzOTQ2NzkzMjg1RkNFNjE1QSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjE3RTMwRjc5NEEzQzExRTM5NDY3OTMyODVGQ0U2MTVBIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjE3RTMwRjdBNEEzQzExRTM5NDY3OTMyODVGQ0U2MTVBIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+zPQUvwAAAWFJREFUeNpi/P//PwM+cP36dTcgdU1TU/MJPnVMDIRBChAnElLEiM9Fly9fFgZSz6BYWVdX9x9ZLvr161cMELMBsQIQO5HttZ8/fyYDMQMUp+D12r59+1iBNA8WOT0gPoDsQCBWB+KPWNR+ZPnx4wczkNEPxPEEwpMNiO+jif0G4nIgngAP7PXr1+cDqR4gZmEgDjwF4sjAwMDDGLG2bNkyRyC1CohFCBiyC4hjoqKiXuOM/jlz5igAqdN4DJsLxOkpKSl/kQUxvPH9+/c3QIoPX0zn5ub+JRj9wMB3AWI2IGbAgQO6u7tZ0fWxYEk7nkjcl0CcA8RyQNwMxFxALAjEzkC8g5BBHlDmQiAuam5ufgfi1NbWbgBSs4EYlMJD0Q1CCezy8nJdILUZFJidnZ070S0ByjMCqVRo2tEAqvmN1UV//vwBpV7d3t7ez9hCGagRZOus4uLirVAvvoLJAQQYAONvoE/MaLvcAAAAAElFTkSuQmCC);
    }
   ...