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

mhe*_*ers 207 css iphone ipad ios

我正在使用CSS来设置我网站上的输入按钮的样式,但在IOS设备上,样式被Mac的默认按钮取代.是否有一种方法可以为iOS设置样式按钮,或者可以创建一个行为类似于提交按钮的超链接?

Jon*_*nge 513

你可能正在寻找

-webkit-appearance: none;
Run Code Online (Sandbox Code Playgroud)

  • +1,很好找,我之前没遇到过那个选项:) (11认同)
  • 如果您正在使用SCSS,请使用`@include experimental(appearance,none);` (6认同)

sub*_* pm 14

请添加此css代码

input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
Run Code Online (Sandbox Code Playgroud)


Dig*_*lla 9

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

<!--Instead of using input-->
<input type="submit"/>
<!--Use button-->
<button type="submit">
<!--You can then attach your custom CSS to the button-->
Run Code Online (Sandbox Code Playgroud)

希望有所帮助.

  • 这仍然不允许我改变按钮的高度.有趣的是,一旦我给按钮一个自定义宽度,自定义高度也被考虑在内. (3认同)

小智 6

使用下面的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;
}
Run Code Online (Sandbox Code Playgroud)
<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!" />
Run Code Online (Sandbox Code Playgroud)