我需要將我的眼睛圖示與我的登入表單輸入置中。但是,我的 Top 50% 和翻譯屬性似乎應用於主字段類別而不是輸入內部。因此,圖示未在輸入欄位內對齊。
.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; }
<div class="field input-field"> <label for="login-pwd">Password</label> <input type="password" name="password" class="form-control" placeholder="Password" id="login-pwd" required=""> <i class="bx bx-hide eye-icon" id="toggle-password"></i> </div>
有人可以幫我解決這個問題嗎?我希望我的圖示位於輸入類型密碼的中心。
你需要給父元素
#position:relative;