-webkit-外观：none；不适用于按钮

Question

在我的 Wordpress 网站开发中使用联系表格 7，我注意到移动设备的按钮不同，所以在搜索之后我找到了 -webkit-appearance: none; 的解决方案，我将其应用于元素 input.wpcf7-form-control.wpcf7-submit。

样式已应用，因为它在我检查元素时显示，但在移动设备上没有任何变化。

我应该将它应用到不同的元素吗？

Answer 1

您应该试试这个代码：

input.wpcf7-form-control.wpcf7-submit {
   -webkit-appearance: none;
   -moz-appearance:    none;
   appearance:         none;
}

如果仍然无效，请考虑添加 !important。

Answer 2

很抱歉回答得太晚了。 class 似乎确实是正确的。 Temani 的回答也是对更广泛的浏览器兼容性的一个很好的建议。然而，有时，即使是像 Safari 这样的浏览器支持，使用前缀 -webkit- 也没有效果。所以，我要给你两个答案：

对于 提交输入 -你的情况 - ，你可以简单地提供你想要的背景和边框属性，这将覆盖浏览器的默认值 css特性。 不需要外表属性。但是您可能需要定义按钮的每个状态，包括 :active 和 :hover
对于复选框和单选按钮，解决该问题的方法是使用可见性隐藏输入：隐藏 并使用 :before and/or :after 创建一个替代检查或无线电，这也需要 可见性：可见属性。您可以使用 :checked:before 选择器为每个状态应用不同的外观

注意：记住 :before 和 :after 与 input 只能在 Chrome 和 Safari 中使用，并且只能与属性 外观一起使用：none

希望对您有所帮助

-webkit-appearance: none; not working for button