2.4K views
1.container form { 2 display: flex; 3 flex-wrap: wrap; 4 flex-direction: column; 5} 6 7.container label { 8 display: flex; 9 cursor: pointer; 10 font-weight: 500; 11 position: relative; 12 overflow: hidden; 13 margin-bottom: 0.375em; 14} 15 16.container label input { 17 position: absolute; 18 left: -9999px; 19} 20 21.container label input:checked + span { 22 background-color: #414181; 23 color: white; 24} 25 26.container label input:checked + span:before { 27 box-shadow: inset 0 0 0 0.4375em #00005c; 28} 29 30.container label span { 31 display: flex; 32 align-items: center; 33 padding: 0.375em 0.75em 0.375em 0.375em; 34 border-radius: 99em; 35 transition: 0.25s ease; 36 color: #414181; 37} 38 39.container label span:hover { 40 background-color: #d6d6e5; 41} 42 43.container label span:before { 44 display: flex; 45 flex-shrink: 0; 46 content: ""; 47 background-color: #fff; 48 width: 1.5em; 49 height: 1.5em; 50 border-radius: 50%; 51 margin-right: 0.375em; 52 transition: 0.25s ease; 53 box-shadow: inset 0 0 0 0.125em #00005c; 54} 55
MIT License