methuselah90 0 Newbie Poster

good morning all!

i'm struggling at the present time to style a drop down select menu that will fit into my current design for mobile devices (i.e. especially the iPhone right now)

http://i.stack.imgur.com/Gn7se.png

^^^ this is how it looks like at present time on my iPod

http://i.stack.imgur.com/wsEtQ.png

^^^ this is how it looks at present on Google Chrome

i would really like for the iPod select drop down to mirror the desktop drop down if possible as demonstrated with the textfields but i seem to be stuck at a hard point.

please find the current css code i am using below:

/************************************************************************
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;    
    }

i would appreciate any help in resolving this css conundrum!

many thanks in advance