灰线出现在我在 iPhone 上的输入字段中

Posted 2023-03-31

技术标签:

【中文标题】灰线出现在我在 iPhone 上的输入字段中【英文标题】：Grey line appears in my input field on iPhone 【发布时间】：2014-04-20 00:31:57 【问题描述】：

我的输入有一条奇怪的灰线，但仅在 iPhone 上。它是非移动浏览器上的纯白色输入。我没有安卓，所以我无法测试它是否只是 iPhone。有什么解决方案可以使输入完全变白？

html：

<input class="bt-email" type="email" name="email" placeholder="enter email address">
<input class="bt-submit" type="submit" value="let's get moving!">

CSS：

.bt-email 
   color: #1795db;
   display: inline-block;
   margin: 0 auto;
   height: 30px;
   font-family: 'Lato', serif;
   font-weight: 300;
   padding-left: 15px;
   text-decoration: none solid rgb(56, 64, 71);
   width: 90%;
   background: #ffffff;
   border: 4px solid #ffffff;
   border-radius: 5px 5px 5px 5px;

.bt-email:focus 
   outline: #ffffff;

.bt-submit 
   color: #ffffff;
   display: inline-block;
   margin: 0 auto;
   height: 40px;
   font-family: 'Lato', serif;
   font-weight: 300;
   text-decoration: none solid rgb(56, 64, 71);
   width: 90%;
   padding-top: 4px;
   background: #fb7f2d;
   border: 1px solid #fb7f2d;
   border-radius: 5px 5px 5px 5px;

【问题讨论】：

仅在 iPhone 上？您是否尝试过 android 或任何其他浏览器？您是否调整了浏览器的大小并查看是否可以复制它？也许在 chrome 上的开发工具中使用模拟器并尝试在各种设备上复制它它实际上并没有在任何设备的 Chrome 模拟器中显示灰线。但是，它确实出现在实际的 iPhone 上。我已经有几个朋友证实了这一点。 【参考方案1】：

我实际上偶然发现了我正在寻找的答案。似乎移动 Safari 为输入添加了内部文本阴影。这段代码解决了它：

CSS：