194 views
CSS
1.rating { 2 cursor: pointer; 3} 4 5.card { 6 display: -webkit-box; 7 display: -ms-flexbox; 8 display: flex; 9 margin: auto; 10 -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 16, 0.19), 0 0.3rem 0.3rem rgba(0, 0, 16, 0.23); 11 box-shadow: 0 0.5rem 1rem rgba(0, 0, 16, 0.19), 0 0.3rem 0.3rem rgba(0, 0, 16, 0.23); 12 background-color: rgb(255, 255, 255); 13 padding: 0.8rem; 14 width: 33rem; 15} 16 17.rating-container { 18 display: -webkit-box; 19 display: -ms-flexbox; 20 display: flex; 21 -webkit-box-pack: justify; 22 -ms-flex-pack: justify; 23 justify-content: space-between; 24 padding: 0.4rem 0.8rem; 25 width: 100%; 26} 27 28.rating { 29 background-color: rgba(0, 0, 16, 0.8); 30 padding: 0.4rem 0.4rem 0.1rem 0.4rem; 31 border-radius: 2.2rem; 32} 33 34.rating-form { 35 display: flex; 36 flex-wrap: wrap; 37 justify-content: center; 38} 39 40.svg { 41 fill: rgb(242, 242, 242); 42 height: 3.6rem; 43 width: 3.6rem; 44 margin: 0.2rem; 45 align-items: center; 46 justify-content: center; 47 cursor: pointer; 48} 49 50.rating-form-2 svg { 51 height: 3rem; 52 width: 3rem; 53 margin: 0.5rem; 54} 55 56#radios label { 57 position: relative; 58} 59 60.super-happy, [type="radio"] { 61 position: absolute; 62 opacity: 0; 63} 64 65.input ,[type="radio"] + svg { 66 -webkit-transition: all 0.2s; 67 transition: all 0.2s; 68} 69 70.super-happy[class="super-happy"]:hover + svg, 71.super-happy[class="super-happy"]:checked + svg, 72.super-happy[class="super-happy"]:focus + svg { 73 fill: rgb(0, 204, 79); 74 transition: 1.5s; 75} 76 77.neutral[class="neutral"]:hover + svg, 78.neutral[class="neutral"]:checked + svg, 79.neutral[class="neutral"]:focus + svg { 80 fill: rgb(232, 214, 0); 81 transition: 1.5s; 82} 83 84.super-sad[class="super-sad"]:hover + svg, 85.super-sad[class="super-sad"]:checked + svg, 86.super-sad[class="super-sad"]:focus + svg { 87 fill: rgb(239, 42, 16); 88 transition: 1.5s; 89} 90 91 92
HTML
1<div class="rating"> 2 <form class="rating-form"> 3 <label for="super-happy" class="lb"> 4 <input type="radio" name="rating" class="super-happy" id="super-happy" value="super-happy"> 5 <svg class="svg" viewBox="0 0 24 24"><path d="M12,17.5C14.33,17.5 16.3,16.04 17.11,14H6.89C7.69,16.04 9.67,17.5 12,17.5M8.5,11A1.5,1.5 0 0,0 10,9.5A1.5,1.5 0 0,0 8.5,8A1.5,1.5 0 0,0 7,9.5A1.5,1.5 0 0,0 8.5,11M15.5,11A1.5,1.5 0 0,0 17,9.5A1.5,1.5 0 0,0 15.5,8A1.5,1.5 0 0,0 14,9.5A1.5,1.5 0 0,0 15.5,11M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"></path></svg> 6 </label> 7 <label for="neutral" class="lb"> 8 <input type="radio" name="rating" class="neutral" id="neutral" value="neutral"> 9 <svg class="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" viewBox="0 0 24 24"><path d="M8.5,11A1.5,1.5 0 0,1 7,9.5A1.5,1.5 0 0,1 8.5,8A1.5,1.5 0 0,1 10,9.5A1.5,1.5 0 0,1 8.5,11M15.5,11A1.5,1.5 0 0,1 14,9.5A1.5,1.5 0 0,1 15.5,8A1.5,1.5 0 0,1 17,9.5A1.5,1.5 0 0,1 15.5,11M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M9,14H15A1,1 0 0,1 16,15A1,1 0 0,1 15,16H9A1,1 0 0,1 8,15A1,1 0 0,1 9,14Z"></path></svg> 10 </label> 11 <label for="super-sad" class="lb"> 12 <input type="radio" name="rating" class="super-sad" id="super-sad" value="super-sad"> 13 <svg class="svg" viewBox="0 0 24 24"><path d="M12,2C6.47,2 2,6.47 2,12C2,17.53 6.47,22 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M16.18,7.76L15.12,8.82L14.06,7.76L13,8.82L14.06,9.88L13,10.94L14.06,12L15.12,10.94L16.18,12L17.24,10.94L16.18,9.88L17.24,8.82L16.18,7.76M7.82,12L8.88,10.94L9.94,12L11,10.94L9.94,9.88L11,8.82L9.94,7.76L8.88,8.82L7.82,7.76L6.76,8.82L7.82,9.88L6.76,10.94L7.82,12M12,14C9.67,14 7.69,15.46 6.89,17.5H17.11C16.31,15.46 14.33,14 12,14Z"></path></svg> 14 </label></form></div>