#e8e8e8
1:focus { 2 outline: 0; 3 border-color: #2260ff; 4 box-shadow: 0 0 0 4px #b5c9fc; 5} 6 7.mydict div { 8 display: flex; 9 flex-wrap: wrap; 10 margin-top: 0.5rem; 11 justify-content: center; 12} 13 14.mydict input[type="radio"] { 15 clip: rect(0 0 0 0); 16 clip-path: inset(100%); 17 height: 1px; 18 overflow: hidden; 19 position: absolute; 20 white-space: nowrap; 21 width: 1px; 22} 23 24.mydict input[type="radio"]:checked + span { 25 box-shadow: 0 0 0 0.0625em #0043ed; 26 background-color: #dee7ff; 27 z-index: 1; 28 color: #0043ed; 29} 30 31label span { 32 display: block; 33 cursor: pointer; 34 background-color: #fff; 35 padding: 0.375em .75em; 36 position: relative; 37 margin-left: .0625em; 38 box-shadow: 0 0 0 0.0625em #b5bfd9; 39 letter-spacing: .05em; 40 color: #3e4963; 41 text-align: center; 42 transition: background-color .5s ease; 43} 44 45label:first-child span { 46 border-radius: .375em 0 0 .375em; 47} 48 49label:last-child span { 50 border-radius: 0 .375em .375em 0; 51} 52
Comments
MIT License