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

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

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