css - CSS - 按钮的背景颜色在移动设备上不会改变

Question

左边的是电脑，右边的是手机。我不希望手机具有渐变背景或圆形边缘。

input {
    margin: 0px;
    font-size: 20px;
    border: 0px;
    background: green;
    color: lime;
    height: 40px;
    width: 123px;
    padding: 0px;
}

Answer 1

您可以将属性“-webkit-appearance”设置为“none”：

input {
    -webkit-appearance: none;
}

Answer 2

我知道在 iPhone 和其他使用 safari 的苹果产品等移动设备上，输入的格式不同，包括圆角。解决此问题的最简单方法是仅使用 onclick 功能创建图像。像这样，或者 onmouseover 用于悬停效果。

<script>
function myfunction(){

}
</script>

<img src="picture.png" onclick="myfunction();" onmouseover="this.src='image2.gif'" />