Rumah > Soal Jawab > teks badan
Saya perlu memusatkan ikon mata saya dengan input borang log masuk saya. Walau bagaimanapun, sifat Top 50% dan Terjemahan saya nampaknya digunakan pada kelas medan utama dan bukannya di dalam input. Oleh itu, ikon tidak diselaraskan dalam medan input.
.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>
Bolehkah sesiapa membantu saya menyelesaikan masalah ini? Saya mahu ikon saya berada di tengah-tengah kata laluan jenis input.
P粉8418709422023-09-12 21:26:28
Anda perlu memberikan elemen indukposition:relative;
.input-field { position: relative; }