@小明月 2024-01-11 11:47 采纳率: 0%
浏览 8

火狐浏览器显示密码圆点很大

问题:我使用antd的组件Input.Password写密码输入框,我添加样式代码改变了输入框输入内容的字体样式,但是字体样式改变后,突然密码隐藏时显示的圆点变得很大,只有火狐浏览器会这样,谷歌浏览器和电脑自带的浏览器都没有出现这种情况,这是为什么呢,我该如何让火狐浏览器显示的圆点小一点呢?
代码和截图:

:where(.css-dev-only-do-not-override-17sses9).ant-input-affix-wrapper > input.ant-input{
    font-family: SourceHanSansCN-Light;
}
//这是改变字体样式的代码
<Input.Password className="register-input-frame-psw" prefix={<img src={Images.icon_mima} alt="icon_password" className="login-input-icon" />}
                        placeholder="请设置登录密码" visibilityToggle={true} iconRender={(visible) => (visible ? <img src={Images.icon_xianshi} /> : <img src={Images.icon_yincang} />)}
                    />
//这是我的输入框

以下图片时火狐浏览器显示的样子

img

以下图片是其他浏览器显示的样子

img

  • 写回答

1条回答 默认 最新

  • CSDN-Ada助手 CSDN-AI 官方账号 2024-01-11 14:17
    关注

    【以下回答由 GPT 生成】

    问题原因是在火狐浏览器中,Input.Password 组件默认使用了不同的样式来显示密码输入框。当通过自定义样式修改了密码输入框中输入内容的字体样式后,火狐浏览器将会应用该样式到密码圆点上,导致圆点变得很大。

    要解决这个问题,可以通过修改自定义样式来调整火狐浏览器中密码圆点的大小。以下是具体的解决方案:

    1. Input.Password 组件添加一个自定义的类名,例如 register-input-frame-psw,可以在组件上通过 className 属性添加。
    2. 在 CSS 中针对该类名添加样式,将 !where 选择符替换为 :root 选择符。
    3. 在新的样式中,使用 font-size 属性来调整密码圆点的大小。根据需要,设置一个合适的值。例如:
    :root .register-input-frame-psw.css-dev-only-do-not-override-17sses9 .ant-input-affix-wrapper > input.ant-input {
        font-family: SourceHanSansCN-Light; /* 保持原有的自定义样式不变 */
    }
    
    :root .register-input-frame-psw .ant-input {
        font-family: SourceHanSansCN-Light; /* 保持原有的自定义样式不变 */
    }
    
    :root .register-input-frame-psw .ant-input-suffix .ant-input-password-icon {
        font-size: 16px; /* 设置合适的密码圆点大小 */
    }
    
    1. 确保以上代码中的选择符与相关元素的层次结构一致。根据具体情况,对类名和选择符进行调整。

    这样,密码圆点在火狐浏览器中应该会显示为较小的大小。请注意,当修改了 Input.Password 组件的自定义样式后,可能需要对其他浏览器进行测试,确保在其他浏览器上的显示效果仍然符合要求。

    如果以上解决方案不起效,可能存在其他未知因素导致该问题,建议进一步调查和排查。


    如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^
    评论

报告相同问题?

问题事件

  • 创建了问题 1月11日

悬赏问题

  • ¥30 uniapp小程序苹果手机加载gif图片不显示动效?
  • ¥20 js怎么实现跨域问题
  • ¥15 C++dll二次开发,C#调用
  • ¥18 c语言期中复习题(求解)
  • ¥15 请教,如何使用C#加载本地摄像头进行逐帧推流
  • ¥15 Python easyocr无法顺利执行,如何解决?
  • ¥15 求一个十多年前的国产符号计算软件(MMP)+用户手册
  • ¥15 为什么会突然npm err!啊
  • ¥15 java服务连接es读取列表数据,服务连接本地es获取数据时的速度很快,但是换成远端的es就会非常慢,这是为什么呢
  • ¥15 vxworks交叉编译gcc报错error: missing binary operator before token "("