html - 隐藏选择列表箭头 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;
}