关闭iPhone / Safari输入元素四舍五入

11 回答

• 605

  单独 input -webkit-appearance: none; 不起作用 .

  请尝试添加 -webkit-border-radius:0px; .

  回复于 2024-05-17T00:21:10+08:00
• 4

  接受的答案使得单选按钮在Chrome上消失 . 这有效：

  input:not([type="radio"]):not([type="checkbox"]) {
      -webkit-appearance: none;
      border-radius: 0;
  }
  

  回复于 2024-05-17T00:21:10+08:00
• 6

  对于我在iPhone 3GS上的iOS 5.1.1，我必须清除搜索字段的样式并将其设置为预期的样式

  input[type="search"] {-webkit-appearance: none; border-radius: 0 3px 3px 0;}
  

  单独做 -webkit-border-radius: 0; 并没有清除原生样式 . 这也是本机应用程序的webview .

  回复于 2024-05-17T00:21:10+08:00
• 3

  我使用了一个简单的border-radius：0;删除文本输入类型的圆角 .

  回复于 2024-05-17T00:21:10+08:00
• 9

  为了在Safari和其他浏览器上正确呈现按钮，除了将webkit-appearance设置为none之外，还需要为按钮指定特定样式，例如：

  border-radius: 0;
  -webkit-appearance: none;
  background-image: linear-gradient(to bottom, #e4e4e4, #f7f7f7);
  border: 1px solid #afafaf
  

  回复于 2024-05-17T00:21:10+08:00
• 0

  如果使用normalize.css，该样式表将执行类似 input[type="search"] { -webkit-appearance: textfield; } 的操作 .

  这比 .foo 这样的单个类选择器具有更高的特异性，所以要注意你不能只做 .my-field { -webkit-appearance: none; } . 如果您没有更好的方法来实现正确的特异性，这将有助于：

  .my-field { -webkit-appearance: none !important; }

  回复于 2024-05-17T00:21:10+08:00
• 33

  这是在IOS中删除舍入的最佳方法 .

  textarea,
  input[type="text"],
  input[type="button"],
  input[type="submit"] {
       -webkit-appearance: none;
       border-radius: 0;
  }
  

  Note: 请不要将此代码用于选择选项 . 我们的选择会有问题 .

  回复于 2024-05-17T00:21:10+08:00
• 46

  在iOS 5及更高版本中，好的' border-radius 可以解决问题：

  input {
      border-radius: 0;
  }
  

  如果您必须仅删除iOS上的圆角或由于某种原因无法规范化跨平台的圆角，请使用前缀 -webkit-border-radius 属性，但仍然支持此属性 . 当然请注意，Apple可以随时选择放弃对前缀属性的支持，但考虑到其他特定于平台的CSS功能，他们可能会保留它 .

  在旧版本上，您必须设置 -webkit-appearance: none ：

  input {
      -webkit-appearance: none;
  }
  

  回复于 2024-05-17T00:21:10+08:00
• 2

  以下是Compass（SCSS）的完整解决方案：

  input {
    -webkit-appearance: none;  // remove shadow in iOS
    @include border-radius(0);  // remove border-radius in iOS
  }
  

  回复于 2024-05-17T00:21:10+08:00
• 4

  请试试这个：

  尝试像这样添加 input Css：

  -webkit-appearance: none;
         border-radius: 0;
  

  回复于 2024-05-17T00:21:10+08:00
• 7

  我有同样的问题，但只有提交按钮 . 需要移除内部阴影和圆角 -

  input[type="submit"] { -webkit-appearance:none; -webkit-border-radius:0; }
  

  回复于 2024-05-17T00:21:10+08:00