CSS <input> 边框属性，奇怪的行为[重复]

Question

我正在修改我拥有的联系表单的文本字段输入的样式。我想要的样式只是底部边框，它似乎在 chrome 中工作，但在移动版 Safari 上不起作用，整个边框仍然可见。请参阅下面的图片以供参考。

Chrome Version 91.0.4472.114 (MacOS)

Chrome 运行良好，看起来不错。

Safari iOS 14.6

在我的手机上，通过屏幕截图很难看到边框的一些顶角是可见的，而底部边框是弯曲的。

css

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

Answer 1

请将border-radius设为0；

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