Html 移动Safari文本区域背景

MobileSafari中出现了一个在所有其他浏览器中都能正常工作的文本区域。请参见下图以查看实际的分解情况：默认背景显示在我在样式表中指定的内容上，在焦点上发生了一些真正奇怪的事情

以下是CSS和标记：

#search_form, {
    height: 13px;
    width: 188px;
    border: 1px solid #d9d9d9;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    background-color: #f6f6f6;
    float: left;
    padding: 5px;
}

#search_form:hover, #search_form:focus {
    border: 1px solid #de6b2c;
    outline: none;
}

<input id="search_form" type="text" name="search_form" title="Search" value="" tabindex="1"  />

---

可能是因为搜索表单后有逗号而出错

编辑：ok，在iphone上测试一下。问题不在于逗号。据我所知，使其工作的唯一方法是在css中添加以下内容：

由此

#search_form {
    height: 13px;
    width: 188px;
    border: 1px solid #d9d9d9;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    background-color: #f6f6f6;
    float: left;
    padding: 5px;
}

转到以下位置：

#search_form[type="text"] {
    height: 13px;
    width: 188px;
    -webkit-border-radius: 100px;
    float: left;
    padding: 5px;
}

---

以上代码适用于safari mobile。将提供默认外观。我建议您，如果这是您构建的第一个web应用程序，请尝试针对iphone的css3框架。您会发现非常好的教程、示例和社区。

边界半径的100px不是太大了吗？