如何仅在移动设备上为下拉框添加样式

Question

实际上，我正在尝试使用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;
}

- Developer_world

---

阅读此内容：https://dev59.com/YXI-5IYBdhLWcg3wW3Cp - Jason Lydon

Answer 1

您可以使用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;
}
}

- gutenburgb

---

max-device-width: https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries#device-width - Jason Lydon

Answer 2

推荐的方法是使用媒体查询来针对特定分辨率进行目标定位。

对于您的情况，可以将CSS修改为以下内容：

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

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

另一种不太推荐的方法是通过使用JavaScript检测用户代理来针对设备类型进行定位。

缺点在于，今天你所针对的设备在新设备发布或用户代理更新时可能会发生变化。

- xengravity

Answer 3

在使用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*/
       }

- UI Xpider

Answer 4

首先使用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;
    }
}

- nweg