选择删除下拉箭头 - 跨浏览器答案

【问题标题】：Select removing dropdown arrow - Cross-browser选择删除下拉箭头 - 跨浏览器
【发布时间】：2014-04-22 09:54:24
【问题描述】：

我的代码在除IE 之外的所有浏览器中都运行良好。我为选择设置了样式，但无法删除IE 中的默认箭头。简单代码：HTML

<form>
<label for="selectitem">Food Favorites</label>
<select id="selectitem">
    <option>Choose...</option>
    <option value="italian">Italian</option>
    <option value="japanese">Japanese</option>
    <option value="mexican">Mexican</option>
    <option value="vietnamese">Vietnamese</option>
</select>
</form>

CSS 代码：

form {
    position: relative;
    top: 50px;          
}

form * {
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent;
    behavior: url(PIE.htc);
}

select, option {
    border: none;
    background: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
}
    body {
    background: #666;
}

form {
    position: relative;
    width: 340px;
    margin: 0 auto;
    font-weight: bold;
    color: #DDD;
}

select {
    background: #555;
    border-radius: 4px;
    width: 240px;
    height: 35px;
    background: url('select.png') no-repeat;
    color: #DDD;
    padding: 8px;
    outline: solid transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';

}

select:focus {
    background: url('select.png') no-repeat 0 -35px;
}

option {
    background: #666;
    color: #DDD;
    padding: 5px;
    text-align: center;
}

我设法用

删除了 Firefox 中的箭头

webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: '';

供选择的背景图片：http://i.imgur.com/PSolPt7.png

【问题讨论】：

行为：用于旧版 IE 支持的 url(PIE.htc)
我个人的看法是你不应该不设置表单元素的样式。人们已经习惯了他们看起来像他们的样子，而改变这会让他们感到困惑。
@ Niet the Dark Absol 你说的没错，但我的一些雇主要求为表单定制设计

标签： html css forms select

【解决方案1】：

这是我问题的答案:) 火狐使用

select {

    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
}

IE 使用

select::-ms-expand {
    display: none;
}

哪个 -ms-expand 是 Microsoft IE 的箭头

【讨论】：

抱歉报告：-moz-appearance: none;对我什么都没做。 FF 32，Mac OS X。
仅供参考。您忘记了 webkit 上的破折号。需要是-webkit-appearance: none;。也不适用于

【解决方案2】：

我成功使用jquery-selectBox

您的选择框自定义包含的 css 文件的样式。特别要删除箭头，修改 .select-arrow 使其具有 display:none

我的看起来如下：

.selectBox-dropdown .selectBox-arrow {
    position: absolute;
    top: 0;
    right: 0;
    width: 23px;
    height: 100%;
    background: url(jquery.selectBox-arrow.gif) 50% center no-repeat;
    border-left: solid 1px #BBB;
    display: none;
}

【讨论】：