设置HTML输入元素的样式以减小可键入的宽度而不影响实际宽度
设置HTML输入元素的样式以减小可键入的宽度而不影响实际宽度
提问于 2021-07-30 05:47:11
我正在尝试实现类似下面的图像，其中我有一个带有自定义显示/隐藏密码眼睛图标的密码字段。我遇到的问题是，如果用户输入一个长密码，密码圆点会溢出到眼睛图标中。
有没有一种方法可以缩小密码字段的可输入宽度，而根本不影响字段的实际宽度？因为我试图使其具有响应性，所以我希望将可键入宽度设置为某种百分比。
我能够直接在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>如果我用width: 85%向#text-field-container目录添加一个样式。它实现了我的目标。然而，无论我怎么尝试，我都不知道如何在CSS/LESS文件中做到这一点。
需要说明的是:我不能访问影子DOM元素，因为它是本地HTML input标记的一部分。
回答 2
Stack Overflow用户
发布于 2021-07-30 05:50:20
你只需要在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;
}Stack Overflow用户
发布于 2021-07-30 08:00:59
这对我来说是一个愚蠢的问题，但StackOverflow不鼓励我删除一个有答案的问题。我最终得到的修复非常简单，不需要任何阴影DOM操作。
神奇的风格就是向input元素添加一个padding-right，从而缩小可输入区域。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68592012
复制相关文章
相似问题
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
