Hiding Select List Arrow CSS3

Question

I have a select list which at the moment looks like this:

Select box

And what I want to do is remove the default arrow. The code I currently have is:

.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;
}

And the 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>

Any ideas on what I'm doing wrong?

Edit: Looks like this is only not working in Firefox, so it's more of a work around I'm looking for...

See http://stackoverflow.com/questions/611482/change-color-and-appearance-of-drop-down-arrow. It appears the -webkit-appearance: none is making the difference, although you could probably forgo the -webkit- prefix and just use appearance: none — Laplace, Jan 07 '15 at 01:15
appearance: none; is already in there and it still doesn't work, however I've since realised that this works in Chrome but not Firefox — Web Develop Wolf, Jan 07 '15 at 01:19
Well then you can try the method mentioned in https://gist.github.com/joaocunha/6273016/. This appears to be a bug in Firefox. Does this work properly in other browsers? — Laplace, Jan 07 '15 at 01:22
possible duplicate of [Firefox 30 is not hiding select box arrows anymore](http://stackoverflow.com/questions/23920990/firefox-30-is-not-hiding-select-box-arrows-anymore) — EternalHour, Jan 07 '15 at 01:32
From reading a few article I've found that in FF 34 this stops working again :( - so looking for a brand new workaround by the looks of things — Web Develop Wolf, Jan 07 '15 at 01:35

score 0 · Accepted Answer · answered Jan 07 '15 at 01:48

Found the solution - it seems you need to make the select box bigger than the container to hide the dropdown arrow as such:

.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;
}

Hiding Select List Arrow CSS3

1 Answers1