6.5K views
1.container { 2 position: relative; 3 --size-button: 40px; 4} 5 6.input { 7 padding-left: var(--size-button); 8 height: var(--size-button); 9 font-size: 15px; 10 border: none; 11 color: #fff; 12 outline: none; 13 width: var(--size-button); 14 transition: all ease 0.3s; 15 background-color: #191A1E; 16 box-shadow: 1.5px 1.5px 3px #0e0e0e, -1.5px -1.5px 3px rgb(95 94 94 / 25%), inset 0px 0px 0px #0e0e0e, inset 0px -0px 0px #5f5e5e; 17 border-radius: 50px; 18 cursor: pointer; 19} 20 21.input:focus, 22.input:not(:invalid) { 23 width: 200px; 24 cursor: text; 25 box-shadow: 0px 0px 0px #0e0e0e, 0px 0px 0px rgb(95 94 94 / 25%), inset 1.5px 1.5px 3px #0e0e0e, inset -1.5px -1.5px 3px #5f5e5e; 26} 27 28.input:focus + .icon, 29.input:not(:invalid) + .icon { 30 pointer-events: all; 31 cursor: pointer; 32} 33 34.container .icon { 35 position: absolute; 36 width: var(--size-button); 37 height: var(--size-button); 38 top: 0; 39 left: 0; 40 padding: 8px; 41 pointer-events: none; 42} 43 44.container .icon svg { 45 width: 100%; 46 height: 100%; 47}
MIT License