Html CSS-按钮在我的手机和手机视图上看起来不同

我在网页上有一个按钮，上面有以下CSS。当我在mobile view中使用开发者工具查看网页时，它看起来如下所示：

然而，当我在手机上查看网站上的按钮时，它看起来是这样的。为什么它有一个奇怪的颜色渐变，为什么它看起来不像开发工具中的颜色渐变

<input class="moreResultsButton" type="button" value="More Results">

.moreResultsButton {
    width: 90% !important;
    max-width: 90% !important;
    margin-bottom: 17.944px !important;
    margin-left: 5% !important;
    margin-right: 5% !important;
    margin-top: 0px !important;
    border-radius: 22.82px !important;
    background: #f3f3f3 !important;
}

.moreResultsButton{
宽度：90%！重要；
最大宽度：90%！重要；
保证金底部：17.944px！重要；
左边距：5%！重要；
保证金权利：5%！重要；
边际顶部：0px！重要；
边界半径：22.82px！重要；
背景：#f3！重要；
}

尝试使用

-webkit外观：无

外观CSS属性用于使用 基于操作系统主题的平台本机样式

---

-webkit外观

属性是此属性的非标准版本，基于webkit（如Safari）和基于Blink（如Chrome、Opera）的浏览器使用它们来实现相同的功能。请注意，出于兼容性原因，Firefox和Edge还支持-webkit外观。

您在手机上使用的浏览器是什么？Microsoft Edge（Chromium）尝试使用

-webkit外观：无

谢谢Minal！成功了。如果你想回答这个问题，我就相信你。再次感谢！