隐藏选择列表箭头CSS3

Question

我有一个选择列表，目前看起来像这样：

我想要做的是删除默认箭头。我目前的代码是：

.styled-select {
   width:305px;
   overflow: hidden;
   background: #F8F8F8;
   border: 1px solid #CCC;
   height: 37px;
   border-radius:5px;
 }

.styled-select .select {
  width: 100%;
  border: 0;
  border-radius:2px;
  line-height: 1.5;
  padding:8px 23px 5px 23px;
  -webkit-appearance: none;
  -moz-appearance: none;
  text-indent: 0.01px;
  text-overflow: '';
  appearance: none;
  background: #F8F8F8 url("/images/ddarrow.png") no-repeat scroll 97% -8px;
}

HTML：

<div class="styled-select">
<select id="ddContrast" class="select" name="ddContrast">
<option value="1" selected="selected">Theme</option>
<option value="1">------------</option>
<option value="0">Dark</option>
<option value="1">Light</option>
</select>
</div>

关于我做错的任何想法？

编辑：看起来这只是在Firefox中不起作用，所以它更多的是我正在寻找的工作...

Answer 1

找到解决方案 - 看起来您需要使选择框大于容器以隐藏下拉箭头：

.styled-select {
   width:305px;
   overflow: hidden;
   background: #F8F8F8;
   border: 1px solid #CCC;
   height: 37px;
   border-radius:5px;
 }

.styled-select .select {
  width: 105.5%;
  border: 0;
  border-radius:2px;
  line-height: 1.5;
  padding:8px 23px 5px 23px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  text-indent: 0.01px;
  text-overflow: '';
  background: transparent url("/images/ddarrow.png") no-repeat scroll 93% -8px;
}

Answer 2

是否有人可以使用它：-webkit-appearance：none;或类似的东西？这曾经是有用的，这些天你开发人员到底在做什么????