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

Question

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

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

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

Answer 1

很抱歉超级迟到的答案。 这门课似乎确实是正确的。 Temani 的回答对于更广泛的浏览器兼容性也是一个很好的建议。 然而，有时，即使被 Safari 等浏览器支持，使用前缀 -webkit- 也没有任何效果。 所以，我要给你两个答案：

1. 对于提交输入——你的情况——，你可以简单地给出你想要的背景和边框属性，这将覆盖浏览器的默认css属性。 不需要 appearance 属性。但是您可能需要定义按钮的每个状态，包括 :active 和 :hover
2. 对于 复选框 和 单选按钮，解决问题的方法是使用 visibility: hidden 隐藏输入并使用 :before 和/或 :after 来创建一个替代检查或单选，这也需要 visibility: visible 属性。您可以使用 :checked:before 选择器为每个状态应用不同的外观

注意：记住与 input 关联的 :before 和 :after 仅适用于 Chrome 和 Safari并且仅与属性 appearance: none

一起使用

希望对你有帮助

Answer 2

你应该试试这个代码：

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

如果仍然无法正常工作，请考虑添加!important。