How to Make Select Element be Transparent in Chrome?

Question

Please look this example:

select {
  width: 172px;
  height: 22px;
  padding: 2px 7px;
  border: none;
  background: url(http://imgur.com/MJyZM.png) 0 0 no-repeat;
}

<select>
  <option value="abcdefg">abcdefg</option>
  <option value="1234567">1234567</option>
  <option value="abcdefg">abcdefg</option>
</select>

Can someone please update it to be transparent in Chrome? Currently the result in FF is the correct one. Thanks.

Update:

Now without -webkit-appearance: none; works fine in Chrome.

@DragosRizescu Updated the fiddle link, the answer is `-webkit-appearance: none;` but it's not needed anymore for updated Chrome. — Jeaf Gilbert, Sep 07 '16 at 08:13

score 57 · Accepted Answer · edited Jan 22 '19 at 16:19

57

select {
  width:192px;
  padding:2px;
  border:none;
  background:url(http://imgur.com/MJyZM.png) 0 0 no-repeat;
  -webkit-appearance: none;
}

<select>
  <option value="abcdefg">abcdefg</option>
  <option value="1234567">1234567</option>
  <option value="abcdefg">abcdefg</option>
</select>

Not tested on firefox but it seems -webkit-appearance: none; disables specific behaviours webkit can apply.

edited Jan 22 '19 at 16:19

benshabatnoam

answered Nov 10 '10 at 08:57

MatTheCat

Thanks! that just saved me a couple of hours of frustration. +1 – Shahar Oct 09 '12 at 09:14

1 Answers1