2.1K views
1.search-label { 2 display: flex; 3 align-items: center; 4 box-sizing: border-box; 5 position: relative; 6 border: 1px solid transparent; 7 border-radius: 12px; 8 overflow: hidden; 9 background: #3D3D3D; 10 padding: 9px; 11 cursor: text; 12} 13 14.search-label:hover { 15 border-color: gray; 16} 17 18.search-label:focus-within { 19 background: #464646; 20 border-color: gray; 21} 22 23.search-label input { 24 outline: none; 25 width: 100%; 26 border: none; 27 background: none; 28 color: rgb(162, 162, 162); 29} 30 31.search-label input:focus+.slash-icon, 32.search-label input:valid+.slash-icon { 33 display: none; 34} 35 36.search-label input:valid~.search-icon { 37 display: block; 38} 39 40.search-label input:valid { 41 width: calc(100% - 22px); 42 transform: translateX(20px); 43} 44 45.search-label svg, 46.slash-icon { 47 position: absolute; 48 color: #7e7e7e; 49} 50 51.search-icon { 52 display: none; 53 width: 12px; 54 height: auto; 55} 56 57.slash-icon { 58 right: 7px; 59 border: 1px solid #393838; 60 background: linear-gradient(-225deg, #343434, #6d6d6d); 61 border-radius: 3px; 62 text-align: center; 63 box-shadow: inset 0 -2px 0 0 #3f3f3f, inset 0 0 1px 1px rgb(94, 93, 93), 0 1px 2px 1px rgba(28, 28, 29, 0.4); 64 cursor: pointer; 65 font-size: 12px; 66 width: 15px; 67} 68 69.slash-icon:active { 70 box-shadow: inset 0 1px 0 0 #3f3f3f, inset 0 0 1px 1px rgb(94, 93, 93), 0 1px 2px 0 rgba(28, 28, 29, 0.4); 71 text-shadow: 0 1px 0 #7e7e7e; 72 color: transparent; 73}
Galahhad
Galahad
MIT License