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

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的箭头