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

Question

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

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

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

Answer 1

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