1

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

我正在制作一个具有选择标签的响应式网站，以允许用户选择他们想要显示 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 中做了什么来禁用箭头显示或有一个解决方案来让箭头返回，同时仍然能够设置我想要的样式。

4

2 回答 2

5

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

正如评论中提到的，<select>风格真的很痛苦。如果您想真正控制它的外观，则唯一现实的选择是使用@AdamMarshal 提到的替换技术。

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

于 2013-08-23T15:36:20.143 回答
0

您可以添加一个类来选择元素并定义“-webkit-appearance: auto”或“-webkit-appearance: initial” - 这也将覆盖用户代理样式表（webkit 外观的默认浏览器值）

于 2022-01-28T05:28:19.340 回答