Добавление и расположение глаза в поле ввода пароля ⇐ CSS

[Гость]

Я работаю над проектом Node.js. Я пытаюсь добавить глаз с помощью Bootstrap в поле ввода пароля, чтобы увидеть его. Вот код моего поля ввода:

Введите данные для формы /* некоторые другие поля */ Зарегистрироваться Проблема на самом деле заключается в расположении глаза. Вот все необходимые стили CSS:

.container{ дисплей: гибкий; выровнять-элементы: по центру; оправдание-содержание: центр; отступ: 50 пикселей 0; } форма .container, .hello { максимальная ширина: 900 пикселей; отступ: 20 пикселей 30 пикселей; граница-радиус: 10 пикселей; box-shadow:4px 4px 15px rgba(0, 0, 0, 0.2); маржа: 0 авто; цвет фона: #FFFACD; } .container .form-group { граница-радиус: 10 пикселей; поле снизу: 25 пикселей; отступ: 5 пикселей 10 пикселей; } .container .save-info { граница-радиус: 20 пикселей; отступ: 10 пикселей 20 пикселей; размер шрифта: 18 пикселей; шрифт-вес: жирный; цвет фона: #3f93ff; граница: нет; белый цвет; поле-верх: 10 пикселей; } .container .text-center { размер шрифта: xx-большой; цвет: # 154360; } #togglePassword { положение: относительное; /* осталось: 85%;*/ курсор: указатель; маржа сверху: 10 пикселей; } Итак, я попытался использовать идентификатор togglePassword вот так, я получил результат, который добавляется после поля ввода, и это выглядит ужасно. Я также пробовал такой код:

#togglePassword { позиция: абсолютная; осталось: 92%; курсор: указатель; маржа сверху: 10 пикселей; } Здесь, когда я начинаю вводить пароль, глаз просто пропадает и кажется неправильная логика. Может ли кто-нибудь предложить лучшее решение или какие-либо идеи, чтобы этот глаз выглядел комфортно и респектабельно для людей, пожалуйста? Я должен иметь возможность нажать на него, чтобы показать/скрыть пароль.