CSS <input> border属性设置仅显下边框在移动端Safari表现异常

iOS Safari 对表单控件存在默认预置样式，会自动给input元素添加系统级圆角、内置边框效果，你编写的基础边框样式未覆盖该默认行为，导致异常显示。

你只需要在原有样式中新增3行属性即可解决：

• 添加-webkit-appearance: none：禁用Safari对input控件的默认外观渲染
• 添加border-radius: 0：手动清除默认圆角
• 添加box-shadow: none：避免Safari默认添加的内阴影干扰边框效果

修改后的完整代码如下：

export const TextField = styled.input`
   width: 100%;
   background: #131d32;
   -webkit-appearance: none;
   border-radius: 0;
   box-shadow: none;
   border: none;
   border-bottom: 2px solid rgba(200, 200, 200, 0.7);
   min-height: 35px;
   color: white;
   outline: 0;
   :focus {
       border-bottom-width: 1px;
   }`;

注：原有代码同时设置了border-bottom: 1px和border-width: 0 0 2px存在属性冲突，已统一调整为显式设置下边框宽度，可读性更强

内容的提问来源于stack exchange，提问作者james