移动 Safari 文本区域背景

【问题标题】：Mobile Safari Text Area Background移动 Safari 文本区域背景
【发布时间】：2010-08-13 23:09:46
【问题描述】：

在所有其他浏览器中运行良好的文本区域在移动 Safari 中出现问题。请参阅下图以了解实际情况：默认背景出现在我在样式表中指定的内容之上，并且在焦点上发生了一些真正奇怪的事情。

http://gettinderbox.com/blogdesign/i/safarimobile.PNG

这是 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"  />

【问题讨论】：

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

标签： html css mobile-safari

【解决方案1】：

您可能会因为#search_form 后面有一个逗号而出错？

编辑： 好的，在 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 的 iWebKit css3 框架。您会发现非常好的教程、示例和社区。p>

【讨论】：