iPad和iPhone的输入按钮样式

214

我使用CSS在网站上设置输入按钮的样式，但是在IOS设备上，样式已由Mac的默认按钮取代。是否可以为iOS的按钮设置样式，或者制作类似于提交按钮的超链接？

— 割草机
source

524

您可能正在寻找

-webkit-appearance: none;

Safari CSS注释 -webkit-appearance
Mozilla开发人员网络的 -moz-appearance

— 乔纳斯·格兰奇
source

按钮按下/：活动样式仍有区别，对吗？它会忽略您的样式并应用半透明的灰色叠加层吗？

— 艾伦·H.

6

如果您使用的是SCSS，请使用@include experimental(appearance, none);

— Sam Soffes 2012年

1

不幸的是，上面的链接现在不可用了（thinkvitamin.com/design/…）。

— Per Quested Aronsson 2012年

与此相关的一个问题是，对于<select>盒子，在桌面浏览器上时不显示箭头。因此，这最好与我认为的媒体查询搭配使用。

— andrewtweber

什么...真的这么简单吗？我使用了很多CSS行来为其设置样式，而这行就足以解决问题了！

19

请添加此CSS代码

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

— Subindas pm
source

9

我最近亲自遇到了这个问题。

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

希望能有所帮助。

— 数字机器人大猩猩
source

3

但这仍然不允许我更改按钮的高度。有趣的是，一旦我给按钮一个自定义的宽度，就将自定义的高度也考虑在内。

— 2012年

这是UIkit v3的修复程序。

— Kalob Taulien

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!" />

展开摘要

— 维诺德
source

0

-webkit-appearance：无；

注意：使用bootstrap来设置按钮样式，这对于响应来说很常见。

— 卡尔提哈·卡尔提
source

0

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

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

我还使用了一些带有reboot.css的引导程序，用（这就是为什么我必须添加！important）覆盖它的原因。

button {
  -webkit-appearance: button;

}

— djnose
source