1.1K views
CSSAdd prefixes
1.input-container { 2 width: 220px; 3 position: relative; 4} 5 6.icon { 7 position: absolute; 8 right: 10px; 9 top: calc(50% + 5px); 10 transform: translateY(calc(-50% - 5px)); 11} 12 13.input { 14 width: 100%; 15 height: 40px; 16 padding: 10px; 17 transition: .2s linear; 18 border: 2.5px solid black; 19 font-size: 14px; 20 text-transform: uppercase; 21 letter-spacing: 2px; 22} 23 24.input:focus { 25 outline: none; 26 border: 0.5px solid black; 27 box-shadow: -5px -5px 0px black; 28} 29 30.input-container:hover > .icon { 31 animation: anim 1s linear infinite; 32} 33 34@keyframes anim { 35 0%, 36 100% { 37 transform: translateY(calc(-50% - 5px)) scale(1); 38 } 39 40 50% { 41 transform: translateY(calc(-50% - 5px)) scale(1.1); 42 } 43}
HTML
1<div class="input-container"> 2 <input type="text" name="text" class="input" placeholder="search..."> 3 <span class="icon"> 4 <svg width="19px" height="19px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path opacity="1" d="M14 5H20" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> <path opacity="1" d="M14 8H17" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M21 11.5C21 16.75 16.75 21 11.5 21C6.25 21 2 16.75 2 11.5C2 6.25 6.25 2 11.5 2" stroke="#000" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path> <path opacity="1" d="M22 22L20 20" stroke="#000" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg> 5 </span> 6</div>