css - 为移动浏览器充分设计样式选择下拉菜单

Question

大家早上好!

我目前正在努力设计一个适合我当前的移动设备设计(尤其是现在的 iPhone)的下拉选择菜单

这是目前在我的 iPod 上的样子

这是它目前在 Google Chrome 上的样子

如果可能的话，我真的很希望 iPod 选择下拉菜单能够镜像桌面下拉菜单，就像文本字段所展示的那样，但我似乎陷入了困境。

请在下面找到我正在使用的当前 css 代码:

/************************************************************************
FORM STYLING
*************************************************************************/
button.button{
    font-size: 14px;
    font-weight: bold;
    background-color: #333;
    width: 95%;
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px;
    padding: 10px;
    text-align: center;
    color: #CCC;
    border: none;
}
input, textarea{
    font-family:Helvetica,Arial,sans-serif;
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px;
    color:#555555;
    background:#FBFBFB none repeat scroll 0 0;
    border:1px solid #E5E5E5;
    font-size:12px;
    line-height: 16px;
    margin-bottom:16px;
    margin-right:6px;
    margin-top:2px;
    padding:10px;
    display: block;
    width: 92%;
}
select {
    font-family:Helvetica,Arial,sans-serif;
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px;
    color:#555555;
    background:#FBFBFB none repeat scroll 0 0;
    border:1px solid #E5E5E5;
    font-size:12px;
    line-height: 16px;
    margin-bottom:16px;
    margin-right:6px;
    margin-top:2px;
    padding:10px;
    display: inline-block;
    width: 30%;
}
label{
    font-size: 12px;
    font-weight: bold;
    color:#5B5A5A;
    display: block;
}
    label span, .required {
        color: #C00;    
    }

如果能帮助我解决这个 CSS 难题，我将不胜感激!

提前致谢

Answer 1

这篇来自 37 signals 的文章解释说，在您自己的 css 优先之前，您必须使用 webkit 样式的 css 重置。他们提供了出色的代码示例。 http://37signals.com/svn/posts/2609-customizing-web-forms-with-css3-and-webkit