iPad 和 iPhone 的样式输入按钮

Posted 2023-02-19

【中文标题】iPad 和 iPhone 的样式输入按钮

【英文标题】：Styling input buttons for iPad and 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 设置按钮样式。它通常用于响应式。