I need to center my eye icon with my login form input. However, my Top 50% and Translation properties seem to be applied to the main field class instead of inside the input. Therefore, the icon is not aligned within the input field.
.form .field { position: relative; height: 70px; width: 100%; margin-top: 24px; border-radius: 3px; } .field input, .field button { height: 70%; width: 100%; border: none; font-size: 14px; font-weight: 400; border-radius: 3px; } .field input { outline: none; padding: 0 15px; border: 1px solid#CACACA; } .eye-icon { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); font-size: 18px; color: #8b8b8b; cursor: pointer; padding: 5px; }
Can someone help me solve this problem? I want my icon to be in the center of the input type password.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
You need to give the parent element
position:relative;.input-field { position: relative; }