1. 简介
CSS3提供了一种重置浏览器默认样式的方式，这对于设计师来说是非常有用的。在设计网页时，我们常常需要自定义表单元素的样式，尤其是在iPhone浏览器上，因为默认样式可能不符合我们的设计需求。
2. 为什么重置iPhone浏览器的表单元素样式
iPhone浏览器对一些表单元素的默认样式进行了定制化处理，以提供更好的用户体验。然而，这些默认样式可能与我们设计的网页风格不一致，因此我们需要自行重置这些样式。
2.1 input元素的默认样式
iOS设备上的input元素默认会有圆角边框和背景样式。如果我们希望使用自定义的边框和背景图像，就需要重写这些默认样式。
input {
border-radius: 0;
background: none;
}
在上面的代码中，我们将border-radius属性设置为0，这样可以去除圆角边框。而将background设置为none，则可以去除背景样式。
2.2 select元素的默认样式
在iOS设备上，select元素默认具有下拉箭头和背景悬停效果。如果我们希望使用自定义的样式，就需要对这些默认样式进行重置。
select {
appearance: none;
background-color: transparent;
padding-right: 1em;
background-image: url("custom_arrow.png");
background-position: right center;
background-repeat: no-repeat;
}
上述代码中，我们使用了appearance属性将下拉箭头隐藏，使用background-color属性将背景颜色设为透明，padding-right属性给右侧留出空间，使用背景图像设置自定义的下拉箭头。
3. 重置其他表单元素样式
除了input和select元素，还有其他的表单元素如textarea和button等，它们也需要根据设计需求进行样式的定制。
3.1 textarea元素的默认样式
textarea元素在iOS设备上默认是可调整尺寸的，它也具有背景悬停效果。如果我们希望去除这些样式，可以使用以下代码：
textarea {
resize: none;
background-color: transparent;
}
上述代码中，我们使用resize属性将textarea元素的尺寸调整功能禁用，并将background-color设为透明。
3.2 button元素的默认样式
iOS设备上的button元素默认具有背景悬停效果和外部阴影。我们可以通过以下代码来重置这些样式：
button {
background-color: transparent;
border: none;
box-shadow: none;
}
上述代码中，我们将background-color设为透明，border设置为none去掉边框，box-shadow设置为none去除外部阴影。
4. 总结
通过CSS3，我们可以轻松地重置iPhone浏览器上input、select等表单元素的默认样式。这样可以更好地与我们设计的网页风格相匹配，提供更好的用户体验。
在本文中，我们介绍了重置input、select、textarea和button等表单元素的默认样式，并提供了具体的CSS代码实例。通过理解和运用这些技巧，我们能够更好地定制和设计网页表单元素的样式。