样式选择适合移动浏览器的下拉菜单

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个信号解释了在您自己的css优先之前必须使用webkit样式的css重置。它们提供了出色的代码示例 http://37signals.com/svn/posts/2609-customizing-web-forms-with-css3-and-webkit