样式化 HTML 输入元素以减小可输入宽度而不影响实际宽度答案

【问题标题】：Style HTML input element to decrease type-able width without affecting actual width样式化 HTML 输入元素以减小可输入宽度而不影响实际宽度
【发布时间】：2021-07-31 00:00:59
【问题描述】：

我正在尝试实现如下图所示的内容，其中我有一个带有自定义显示/隐藏密码眼睛图标的密码字段。我遇到的问题是，如果用户输入长密码，密码点会溢出到眼睛图标中。

有没有办法在不触及该字段的实际宽度的情况下缩小密码字段的可输入宽度？因为我正在尝试使其具有响应性，所以我想将可键入的宽度设置为某种百分比。

我能够直接在 Chrome 开发工具中实现我想要的行为，因为我看到了类似的内容：

<input type="password" ....>
    #shadow-root (user-agent)
        <div pseudo="-webkit-input-placeholder" id="placeholder" style="display: block !important;">Password</div>
        <div id="text-field-container" pseudo="-internal-password-container">
            <div id="editing-view-port">
                <div></div>
            </div>
            <div pseudo="-ms-reveal" id="password-reveal" style="display: none;"></div
        </div>
</input>

如果我向#text-field-container div 添加样式，则使用width: 85%。它实现了我的目标。但是，无论我尝试什么，我都不知道如何在我的 CSS/LESS 文件中执行此操作。

澄清一下：我无权访问 shadow DOM 元素，因为它是原生 HTML 输入标记的一部分。

【问题讨论】：

已添加，查看我的回答

标签： html css

【解决方案1】：

你只需要在 HTML 中做这样的事情，它应该像你说的那样工作：

<input type="password" ....>
    #shadow-root (user-agent)
        <div pseudo="-webkit-input-placeholder" id="placeholder" style="display: block !important;">Password</div>
        <div style="width: 85%;" id="text-field-container" pseudo="-internal-password-container">
            <div id="editing-view-port">
                <div></div>
            </div>
            <div pseudo="-ms-reveal" id="password-reveal" style="display: none;"></div
        </div>
</input>

你也可以在 css 文件中这样尝试：

#text-field-container {
 width: 85% !important;
}

【讨论】：

不幸的是，我不相信这对我有用，因为我无法访问 shadow DOM 来简单地添加内联样式。
所以你只能访问 css 而不能访问 html 页面？ :) 将代码添加到 css 文件。

【解决方案2】：

这对我来说是一个愚蠢的问题，但 StackOverflow 不鼓励我删除一个有答案的问题。我最终采用的修复非常简单，不需要任何影子 DOM 操作。

神奇的风格就是在input 元素上添加一个padding-right，从而缩小可输入区域。

【讨论】：