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

Question

问题：我使用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} />)}
                    />
//这是我的输入框

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

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

Answer 1

【以下回答由 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 组件的自定义样式后，可能需要对其他浏览器进行测试，确保在其他浏览器上的显示效果仍然符合要求。

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

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