CODEWITHSUNDEEP
cssselectgoogle-chrome
Jeaf Gilbert
Jeaf Gilbert

Reputation: 11981

How to Make Select Element be Transparent in Chrome?

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>

https://jsfiddle.net/jeafgilbert/wz0zaev0/

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.

Upvotes: 31

Views: 114732

Answers (1)

MatTheCat
MatTheCat

Reputation: 18721

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.

Upvotes: 57

Related Questions