How to style a select box only on mobile devices

Question

Actually I am trying to style <select> box using CSS(no any image as background) my problem is when I view it on mobile devices it show me like a textbox please guide me how to make it like a select box with css. Note: I don't want any background image in css.

select {
    background: -webkit-linear-gradient(white, #666);
    border: 1px solid #ccc;
    border-radius: 5px;
    color: white;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
    -webkit-appearance: none;
}

Answer 1

You can do it using max-device-width (CSS3):

@media only screen and (max-device-width: 480px) {
select {
    background: -webkit-linear-gradient(white, #666);
    border: 1px solid #ccc;
    border-radius: 5px;
    color: white;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
    -webkit-appearance: none;
}
}