1.6K views
1.input-container { 2 position: relative; 3 display: flex; 4 align-items: center; 5} 6 7.input { 8 width: 40px; 9 height: 40px; 10 border-radius: 10px; 11 border: none; 12 outline: none; 13 padding: 18px 16px; 14 background-color: transparent; 15 cursor: pointer; 16 transition: all .5s ease-in-out; 17} 18 19.input::placeholder { 20 color: transparent; 21} 22 23.input:focus::placeholder { 24 color: rgb(131, 128, 128); 25} 26 27.input:focus,.input:not(:placeholder-shown) { 28 background-color: #fff; 29 border: 1px solid rgb(98, 0, 255); 30 width: 290px; 31 cursor: none; 32 padding: 18px 16px 18px 40px; 33} 34 35.icon { 36 position: absolute; 37 left: 0; 38 top: 0; 39 height: 40px; 40 width: 40px; 41 background-color: #fff; 42 border-radius: 10px; 43 z-index: -1; 44 fill: rgb(98, 0, 255); 45 border: 1px solid rgb(98, 0, 255); 46} 47 48.input:hover + .icon { 49 transform: rotate(360deg); 50 transition: .2s ease-in-out; 51} 52 53.input:focus + .icon,.input:not(:placeholder-shown) + .icon { 54 z-index: 0; 55 background-color: transparent; 56 border: none; 57} 58