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

Read this: http://stackoverflow.com/questions/1895476/how-to-style-a-select-dropdown-with-css-only-without-javascript — Jason Lydon, Apr 17 '15 at 20:09

score 6 · Answer 1 · answered Apr 17 '15 at 19:58

6

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

answered Apr 17 '15 at 19:58

gutenburgb

128
5

`max-device-width`: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#device-width – Jason Lydon Apr 17 '15 at 20:00

score 3 · Answer 2 · answered Apr 17 '15 at 19:59

The recommended approach is to use a media query to target specific resolutions.

For your case you can modify your CSS to the following:

@media screen and (max-width: 480px) {
    select{
        /* Add your mobile only CSS here */
    }
}

select {
    /* Add your non-mobile CSS here */
}

Another approach that is not generally recommended is to target via device type by detecting the user agent with Javascript.

The downside here is that whatever devices you are targeting today will change tomorrow when new devices come out or when user agents are updated.

score 1 · Answer 3 · answered Apr 17 '15 at 20:36

After targeting mobile screen resolution with Css query, and then try to add styling before your select box,

@media screen and (max-width: 480px) {
    select{
        /* try to place your css code to display on mobile devices */
          }
                                     }

select {
    /* try to place your css code to display on large screens*/
       }

nweg · Answer 4 · 2015-04-17T21:07:06.343

First target your mobile devices with a css media query, then add an extra select style before your custom select style to reset the default css:

@media only screen and (max-width: 480px) {
     select {
       -webkit-appearance: none;
       -moz-appearance: none;
       appearance: none;
     }

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

How to style a select box only on mobile devices

4 Answers4