Question

我的代码适用于除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

Answer 1

以下是我的问题的答案:) 对于Firefox使用

select {

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

对于IE使用

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

其中-ms-expand是Microsoft IE的箭头

Answer 2

我使用jquery-selectBox

取得了成功

您的选择框自定义包含的css文件的样式。特别是要删除箭头，请修改.select-arrow，使其显示为：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;
}

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

2 个答案: