如何仅在移动设备上设置选择框的样式
如何仅在移动设备上设置选择框的样式
提问于 2015-04-18 03:48:21
实际上，我正在尝试使用样式样式<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;
}
回答 4
Stack Overflow用户
发布于 2015-04-18 03:58:15
您可以使用最大设备宽度(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;
}
}Stack Overflow用户
发布于 2015-04-18 03:59:25
推荐的方法是使用媒体查询来定位特定的分辨率。
对于您的情况，您可以将CSS修改为以下内容：
@media screen and (max-width: 480px) {
select{
/* Add your mobile only CSS here */
}
}
select {
/* Add your non-mobile CSS here */
}另一种通常不推荐的方法是通过设备类型通过使用Javascript检测用户代理来确定目标。
这里的缺点是，无论您今天针对的是什么设备，明天当新设备推出或用户代理更新时，都会发生变化。
Stack Overflow用户
发布于 2015-04-18 03:56:05
首先使用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;
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29708166
复制相关文章
相似问题
腾讯云开发者
