如何风格选择框仅在移动设备上

其实我使用CSS试图风格<select>盒（没有任何图片作为背景）我的问题是，当我认为它在移动设备上显示它我就像一个文本框，请指导我如何使它像使用CSS的选择框。注：我不想在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; 
 
}

来源

2015-04-17 Developer_world

阅读：http://stackoverflow.com/questions/1895476 /如何做的风格，一个选 - 下拉列表与 - CSS-只，而无需JavaScript的 –

第一个目标使用CSS媒体查询您的移动设备，那么您的自定义前添加一个额外的选择风格选择风格进行恢复默认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; 
    } 
}

来源

2015-04-17 19:56:04 nweg

你可以使用最大设备宽度（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; 
} 
}

来源

2015-04-17 19:58:15 gutenburgb

'MAX-设备width'：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries＃装置宽度 –

推荐的方法是使用媒体查询来定位特定的分辨率。

对于你的情况下，可以修改CSS为以下：

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

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

那通常不建议是通过检测与使用Javascript所述用户代理经由设备类型的目标的另一种方法。

的这里的缺点是，今天无论设备，您的目标将改变明天，当新设备出来，或者当用户代理进行更新。

来源

2015-04-17 19:59:24 xengravity

针对移动屏幕分辨率的CSS查询后，再试试你的选择框前增加造型，

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

来源

2015-04-17 20:36:14

如何风格选择框仅在移动设备上

回答

相关问题