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

Question

我正在开发一个网站，我希望搜索按钮在所有移动和平板电脑设备上看起来都相同。我创建了fiddle为了那个原因。我用于搜索按钮(适用于手机/平板电脑 View )的代码是:

@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在实际浏览器的移动 View 中，它看起来不错，但如果我从手机上看到它，它看起来会有所不同。

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

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

在我的 iphone 上检查 safari 和 chrome 时，我看到了这个(这是不正确的):

Answer 1

您可以设置appearance: none来告诉iOS Safari(和其他)不要将操作系统 native 样式应用于元素:

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

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