如何让按钮在 css 中的所有设备上看起来都一样？

Question

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

@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 它看起来不错，但是如果我从我的 phone 中看到它看起来不同。

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

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

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

Answer 1

您可以设置 appearance: none 告诉 iOS Safari（和其他）不要将 OS 原生样式应用到元素：

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

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

如何让按钮在 css 中的所有设备上看起来都一样？

How to make button looks same across all devices in css?

css

responsive-design

media-queries

mobile-safari

mobile-chrome