时间戳

首页 > 解决方案 > CSS边界属性，奇怪的行为

html - CSS边界属性，奇怪的行为

问题描述

我正在修改我拥有的联系表单的文本字段输入的样式。我想要的样式只是底部边框，它似乎适用于 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;
   }`;

标签： htmlcssforms

解决方案

请设置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;
   }`;

推荐阅读