为iPad和iPhone设计输入按钮

我使用CSS样式在我的网站上的输入按钮，但在IOS设备上的样式被Mac的默认按钮所取代。是否有一种方法可以为iOS设置按钮样式，或者有一种方法可以让一个超链接表现得像一个提交按钮?

245071 次浏览
小开
最佳答案

你可能正在寻找

-webkit-appearance: none;
小开

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

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

希望这能有所帮助。

小开

请添加此css代码

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

-webkit-appearance:没有;

注意:使用引导样式按钮。它常用来表示响应。

小开

使用下面的css

input[type="submit"] {
font-size: 20px;
background: pink;
border: none;
padding: 10px 20px;
}
.flat-btn {
-webkit-appearance: none; /*For Chrome*/
-moz-appearance: none;/*For Mozilla*/
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!" />

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

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

我还使用了一些bootstrap，其中有一个reboot.css，这覆盖了它(这就是为什么我必须添加!重要)

button {
-webkit-appearance: button;

｝


提交答案