<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<h1>Flat pure CSS3 rating system</h1>
<div id="wrapper">
<input type="radio" id="star1" name="star" />
<label for="star1"></label>
<input type="radio" id="star2" name="star" />
<label for="star2"></label>
<input type="radio" id="star3" name="star" checked="checked"/>
<label for="star3"></label>
<input type="radio" id="star4" name="star" />
<label for="star4"></label>
<input type="radio" id="star5" name="star" />
<label for="star5"></label>
</div>
@import "compass/css3";
body{
text-align: center;
background-color: #34495e;
font-family :"Helvetica Neue", Helvetica, Arial, sans-serif;
}
h1{
color:#FFF;
font-weight:500;
padding:30px;
@include text-shadow(0 3px 3px darken(#34495e,5%));
}
input{
display:none;
}
label{
cursor:pointer;
font-size: 40px;
color:yellow;
display:block;
width: 50px;
height:50px;
line-height:60px;
text-align: center;
float:left;
@include transition(all .2s);
@include text-shadow(0 3px 3px darken(#34495e,5%));
&:hover{
font-size:50px;
color:#FFF;
@include text-shadow(0 0 5px lighten(#34495e,50%));
}
&:before{
display: inline;
width: auto;
height: auto;
line-height: normal;
vertical-align: baseline;
margin-top: 0;
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
text-decoration: inherit;
-webkit-font-smoothing: antialiased;
content: "\f005";
}
}
input:checked + label ~label{
&:before{
content: "\f006";
}
}
#wrapper{
display: inline-block;
&:hover{
label{
&:before{
content: "\f005";
}
&:hover{
&~label:before{
content: "\f006";
}
}
}
}
}
View Compiled
// NO JS here :)
This Pen doesn't use any external CSS resources.