iPad 和 iPhone 的样式输入按钮答案

【问题标题】：Styling input buttons for iPad and iPhoneiPad 和 iPhone 的样式输入按钮
【发布时间】：2011-07-23 21:26:49
【问题描述】：

我在我的网站上使用 CSS 来设置输入按钮的样式，但在 IOS 设备上，样式被 Mac 的默认按钮所取代。有没有办法为 iOS 设置按钮样式，或者可以创建一个类似于提交按钮的超链接？

【问题讨论】：

【解决方案1】：

你可能正在寻找

-webkit-appearance: none;

-webkit-appearance 上的 Safari CSS 注释
Mozilla 开发者网络的-moz-appearance

【讨论】：

button depress/:active 样式还是有区别的，对吧？它会忽略您的样式并应用半透明的灰色叠加层？
如果您使用的是 SCSS，请使用 @include experimental(appearance, none);
上面的链接现在已经失效了，很遗憾 (thinkvitamin.com/design/…)。
其中一个问题是<select> 框在桌面浏览器上时不显示箭头。所以我认为这最好与媒体查询搭配使用。
什么...真的这么简单吗？我用了很多 CSS 线条来设置它的样式，这条线就足够了？！

【解决方案2】：

请添加此 CSS 代码

input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

【讨论】：

【解决方案3】：

我最近自己也遇到过这个问题。

<!--Instead of using input-->
<input type="submit"/>
<!--Use button-->
<button type="submit">
<!--You can then attach your custom CSS to the button-->

希望对您有所帮助。

【讨论】：

这仍然不允许我更改按钮的高度。不过有趣的是，只要我给按钮一个自定义宽度，自定义高度也会被考虑在内。
这是 UIkit v3 的修复。

【解决方案4】：

使用下面的css

input[type="submit"] {
  font-size: 20px;
  background: pink;
  border: none;
  padding: 10px 20px;
}
.flat-btn {
  -webkit-appearance: none;
  -moz-appearance: none;
   appearance: none;
   border-radius: 0;
}

h2 {
  margin: 25px 0 10px;
  font-size: 20px;
}

<h2>iOS Styled Button!</h2>
<input type="submit" value="iOS Styled Button!" />

<h2>No More Style! Button!</h2>
<input class="flat-btn" type="submit" value="No More Style! Button!" />

【讨论】：

【解决方案5】：

我今天在使用 primefaces (primeng) 和 angular 7 时遇到了同样的问题。将以下内容添加到您的 style.css

p-button {
   -webkit-appearance: none !important;
}

我还使用了一些 bootstrap，它有一个 reboot.css，它会覆盖它（这就是为什么我必须添加！important）

button {
  -webkit-appearance: button;

}

【讨论】：

【解决方案6】：

-webkit-外观：无；

注意：使用 bootstrap 设置按钮样式。它通常用于响应式。

【讨论】：