Pure CSS Star Rating Widget
Formulaire CSS + Font awesome
Formulaire d’évaluation avec étoile en pure CSS.
Html :
CSS :
- @import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
- fieldset, label { margin: 0; padding: 0; }
- body{ margin: 20px; }
- h1 { font-size: 1.5em; margin: 10px; }
- /****** Style Star Rating Widget *****/
- .rating {
- border: none;
- float: left;
- }
- .rating > input { display: none; }
- .rating > label:before {
- margin: 5px;
- font-size: 1.25em;
- font-family: FontAwesome;
- display: inline-block;
- content: "\f005";
- }
- .rating > .half:before {
- content: "\f089";
- position: absolute;
- }
- .rating > label {
- color: #ddd;
- float: right;
- }
- /***** CSS Magic to Highlight Stars on Hover *****/
- .rating > input:checked ~ label, /* show gold star when clicked */
- .rating:not(:checked) > label:hover, /* hover current star */
- .rating:not(:checked) > label:hover ~ label { color: #FFD700; } /* hover previous stars in list */
- .rating > input:checked + label:hover, /* hover current star when changing rating */
- .rating > input:checked ~ label:hover,
- .rating > label:hover ~ input:checked ~ label, /* lighten current selection */
- .rating > input:checked ~ label:hover ~ label { color: #FFED85; }
source Pure CSS Star Rating Widget