Блог

Я пытаюсь создать пользовательское поле ввода с вводом текста и кнопкой со значком глаза, чтобы показать/скрыть текст пароля.

Теперь я знаю, что просто создайте поле ввода и абсолютно расположите кнопку «Глаз», но проблема в том, что в некоторых браузерах расширение Lastpass или связка ключей Safari вставят соответствующие значки, таким образом перекрывая значок «глаз», который я всегда хочу видеть и нажимать. В качестве примера, это плохо:

Поэтому это то, чего я хочу достичь:

Я пытаюсь сделать что-то вроде этого:

 <div className="input-wrapper">
    <input className="password-input" type="password" />
    <button className="password-eye">
</div>
 

CSS

 .input-wrapper {
    position: relative;
    border: 1px solid #ccc;
}

.password-input {
    border: none;
    width: calc(100% - 32px);
    height: 40px;
}

.password-eye:extend(.icon-password-eye all) {
    background: white;
    border: none;
    height: 40px;
    font-size: 24px;
    position: absolute;
    right: 0px;
    top: 0px;
    padding-right: 8px;
}

.icon-password-eye::before {
    content: 'e618';
}
 

Проблема, с которой я сталкиваюсь, заключается в том, что, поскольку я хочу, чтобы вся оболочка вела себя так, как если бы она была компонентом ввода, когда пользователь выбирает поле ввода, выбирается только фактическая часть ввода. Кроме того, если при проверке пароля возникают ошибки, только поле ввода отображается красным, в то время как я хочу, чтобы вся часть была красной.

Вот что происходит:

Любая помощь будет очень признательна.

то, что вы хотите сделать,-это изменить CSS границ класса-оболочки ввода. и не ввод

вам нужно изменить код, изменяющий входной css, чтобы изменить css-оболочку ввода.

если вам нужна помощь в этом , пожалуйста, дайте полный код.