Input by Yaya12085
#212121
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: 20px; 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(91, 107, 255); 30 width: 290px; 31 cursor: none; 32 padding: 18px 16px 18px 45px; 33} 34 35.icon { 36 position: absolute; 37 left: 0; 38 height: 45px; 39 width: 45px; 40 background-color: #fff; 41 border-radius: 99px; 42 z-index: -1; 43 fill: rgb(91, 107, 255); 44 border: 1px solid rgb(91, 107, 255); 45} 46 47.input:focus + .icon,.input:not(:placeholder-shown) + .icon { 48 z-index: 0; 49 background-color: transparent; 50 border: none; 51} 52
3.7K views
Variation of ainput
uspaceme 31. October 2023. at 12:49
31. October 2023. at 12:49
Hello, I have a question. Why does this search box become large after I run the code, which is different from the one displayed in Codepen and seems inconsistent? Is this normal? Or what can I do to make the search box thinner and less bulky. thank you。
uspaceme 31. October 2023. at 12:51
31. October 2023. at 12:51
@uspaceme By the way, this is my email address [email protected] I hope you can help me solve this problem
MIT License