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

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

最佳答案

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

关于html - 如何仅在移动设备上设置选择框的样式，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29708166/