Question

寻找我遇到的问题的解决方案。

我正在创建一个响应式网站，其中包含一个选择标记，允许用户选择他们想要显示哪类博客文章，html只是一个基本的选择标记。

<select name="">
    <option value="">Sort by Category</option>
    <option value="">test</option>
    <option value="">Test</option>
</select>

然后，我使用以下代码

设置了select标签的样式

.portfolio-thumbs select {
    width:100%;
    padding:0.625em;
    border:none;
    background:#33c3e2;
    color:#fff; 
    font-size:1.125em;
 }

select {
    -webkit-appearance: none;
    border-radius: 0;
}

这适用于Windows手机，但在Iphone，Blackberry和Android上，选择框的箭头不会显示。有没有人以前遇到过这个问题，知道我在CSS中做了什么来禁用箭头显示或者有一个解决方案来取回箭头，同时仍然能够选择我想要的样式。

Answer 1

-webkit-appearance: none;行告诉webkit浏览器（iPhone，BB和'droid）不显示默认的<select>外观。删除此行将恢复箭头。

正如评论中所提到的，<select>对风格来说是一种真正的痛苦。唯一现实的选择，如果你想真正控制它如何使用@AdamMarshal提到的替换技术。

或者，如果您绝对必须使用<select>和-webkit-appearance: none;，请添加箭头的背景图片。

选择箭头不会出现在iPhone上

1 个答案: