Question

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

Answer 1

您可能正在寻找

-webkit-appearance: none;

Safari -webkit-appearance
Mozilla开发者网络的-moz-appearance

Answer 2

请添加此css代码

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

Answer 3

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

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

希望有所帮助。

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

Answer 5

-webkit-appearance：none;

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

Answer 6

我今天遇到了相同的问题，使用质数（primeng）和angular 7。将以下内容添加到您的style.css

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

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

button {
  -webkit-appearance: button;

}

用于iPad和iPhone的样式输入按钮

6 个答案: