如何在CSS中的所有设备上使按钮外观相同？

Question

我正在一个网站上，我希望搜索按钮在所有移动设备和平板电脑设备上看起来都一样。我为此创建了fiddle。我用于搜索按钮（用于移动设备/平板电脑视图）的代码是：

@media only screen and (max-width: 767px) {
  #gv_search_button_2777 {
    padding-left: 5.5%;
    padding-top: 0.5%;
    padding-bottom: 0.5%;
    padding-right: 5.5%;
    background-color: white;
    font-size: 12px;
    border-radius: 3.5px;
    border: 1px solid #ccc!important;
  }
}

<div class="gv-search-box gv-search-box-submit">
  <input type="hidden" name="mode" value="all">
  <input type="submit" class="button gv-search-button" id="gv_search_button_2777" value="Search">
</div>

问题陈述：

如果我从实际浏览器的移动视图中看到上述fiddle，它看起来不错，但是如果我从手机上看到它，则看起来不一样。

这是我要在所有移动设备上查看的“搜索”按钮的屏幕截图：

我想知道我需要在小提琴中对CSS代码进行哪些更改，以便所有设备上都可以显示上述屏幕截图。

在我的iphone上，通过Safari和Chrome浏览器检查时，我看到了此消息（不正确）：

Answer 1

您可以设置appearance: none来通知iOS Safari（及其他）不要对元素应用OS本机样式：

.button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

您可以在此处重置浏览器样式表属性（例如边距，填充，字体等）并应用您自己的自定义样式。