html - 尝试包含密码眼睛时的自定义输入字段边框行为

Question

我正在尝试创建一个带有文本输入的自定义输入字段和一个带有眼睛图标的按钮来显示/隐藏密码文本。

现在，我知道只需创建一个输入字段并绝对定位眼睛按钮，但问题是在某些浏览器上，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';
}

我面临的问题是，因为我希望整个包装器表现得好像它是一个输入组件，所以当用户选择输入字段时，只选择了实际的输入部分。此外，如果密码验证出错，只有输入字段显示为红色，而我希望整个部分为红色。

这是正在发生的事情：

任何帮助将不胜感激。

标签： htmlcss

Answer 1

你想要做的是改变 input-wrapper 类的边框 CSS。而不是输入

您需要更改更改输入 css 的代码以更改输入包装 css。

如果您需要帮助，请提供完整代码。