如何使CSS中的按钮在所有设备上看起来相同？

Question

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

@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>

问题陈述：

如果我从实际浏览器中的移动视图中获取上述小提琴，它看起来不错，但如果我从手机上看到它，它看起来会有所不同。

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

我想知道我需要对小提琴中的 CSS 代码进行哪些更改，以便上面的屏幕截图出现在所有设备上。

在我的 iphone 上检查 safari 和 chrome 时，我看到了这个（这是不正确的）：

Answer 1

您可以设置appearance: none告诉 iOS Safari（和其他）不要将操作系统本机样式应用于元素：

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

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