如何在移动 Safari 浏览器上拥有透明、无轮廓和无边框的输入字段？答案

【问题标题】：How to have transparent, outline-less and borderless input field on mobile Safari browser?如何在移动 Safari 浏览器上拥有透明、无轮廓和无边框的输入字段？
【发布时间】：2018-02-12 06:43:00
【问题描述】：

我想让 iPhone 上 Safari 上的输入字段看起来像这样JS FIDDLE。目前我已经尝试过这个，它不会产生我想要的：

 .input
  {
    -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
outline: none;  
border:none;
border-color: transparent;
border: 0;
outline: 0;
background: transparent;
border-bottom: 1px solid grey;
width: 250px;
 }

这些字段看起来像 Safari 桌面上小提琴中的输入，只是在手机上不同。

【问题讨论】：

标签： html css forms input safari

【解决方案1】：

This answer 应该是您要查找的内容。您可以使用 iOS5+ 的 border-radius 属性和旧版本的 -webkit-appearance 属性删除圆角。所以你的 CSS 看起来像这样：

.input {
    border: 0;
    outline: 0;
    background: transparent;
    border-bottom: 1px solid grey;
    width: 250px;
    border-radius: 0;
    -webkit-appearance: none;
}

新小提琴：https://jsfiddle.net/ct5s8pr9/

【讨论】：

【解决方案2】：

我需要添加 -webkit-border-radius:0px;

【讨论】：