html选择框向下箭头看起来像鼠标

时间:2013-04-09 06:23:01

标签: html css

在IE8,9和10上,选择元素看起来像附图。下拉箭头被替换为看起来或多或少像鼠标的东西。

在Firefox和Chrome上,它看起来像带有向下箭头的标准下拉列表。

我无法找到任何可以用CSS改变选择的地方。

有什么建议吗?

  <td>
    <select id='allocated' name='alloc' onchange='allocChange()'>
    <option value='??' selected='selected'>??</option>
    <option value='1A' >1A</option>
    <option value='1B' >1B</option>
    <option value='1C' >1C</option>
    <option value='2A' >2A</option>
    <option value='2B' >2B</option>
    <option value='3A' >3A</option>
    </select>
  </td>

CSS不是一个因素 - 即使没有加载样式表

也会发生同样的事情

enter image description here

1 个答案:

答案 0 :(得分:0)

默认情况下可能是..但您可以使用css

更改箭头
.styleSelect select {
background: transparent;
width: 168px;
padding: 5px;
font-size: 16px;
line-height: 1;
border: 0;
border-radius: 0;
height: 34px;
-webkit-appearance: none;
color: #000;
}

.styleSelect {
width: 140px;
height: 34px;
overflow: hidden;
background: url("images/downArrow.png") no-repeat right #fff;
border: 2px solid #000;
}