在手机上可以看到字体真棒图标和输入字段边框重叠

Question

在登录页面上，输入字段前面有令人敬畏的字体图标。为了在两者周围都有一个漂亮的盒子边框，我为图标和输入字段应用了border属性，并分别删除了border-right和border-left，使它看起来像一个盒子。

我现在面临的问题是，当我切换到移动视图时，两者的边框重叠清晰可见（请参阅屏幕截图），但桌面版看起来不错。

如何在移动视图上解决此边框重叠？

Answer 1

我建议将两者放入带边框样式的div中，并禁用图标和输入的边框。