如何使按钮在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（和其他）不要将操作系统本机样式应用于元素：

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

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