206 views
CSSAdd prefixes
1.container input { 2 position: absolute; 3 opacity: 0; 4 cursor: pointer; 5 height: 0; 6 width: 0; 7} 8 9.container { 10 display: block; 11 position: relative; 12 cursor: pointer; 13 user-select: none; 14} 15 16.container svg { 17 position: relative; 18 top: 0; 19 left: 0; 20 height: 50px; 21 width: 50px; 22 transition: all 0.3s; 23 fill: #666; 24} 25 26.container svg:hover { 27 transform: scale(1.1); 28} 29 30.container input:checked ~ svg { 31 fill: #E3474F; 32} 33
HTML
1<label class="container"> 2 <input type="checkbox"> 3 <svg id="Layer_1" version="1.0" viewBox="0 0 24 24" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M16.4,4C14.6,4,13,4.9,12,6.3C11,4.9,9.4,4,7.6,4C4.5,4,2,6.5,2,9.6C2,14,12,22,12,22s10-8,10-12.4C22,6.5,19.5,4,16.4,4z"></path></svg> 4</label>