如何仅在移动设备上设置选择框的样式

Question

实际上我正在尝试<select>使用 CSS设置样式框（没有任何图像作为背景）我的问题是当我在移动设备上查看它时它显示我像一个文本框请指导我如何使它像一个带有 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;
}

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

Answer 2

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