Font awesome 图标和输入字段边框重叠在移动设备上可见

Font awesome icon and input field borders overlap visible on mobile

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

我现在面临的问题是,当我切换到移动视图时,两者的边框重叠清晰可见(请看截图),但桌面版看起来不错。

如何解决移动视图中的边框重叠问题?

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