Background Image for Select dropdown does not work in Chrome

Question

I want to use an image for the background of a select dropdown  The following CSS works fine in Firefox and IE  but does not in Chrome    main  drop-down-loc   width 506px  height  30px  border  none     background-color  Transparent     background  url images text-field gif  no-repeat 0 0     padding 4px  line-height  21px

User · Answer

you can use the below css styles for all browsers except Firefox 30

select {
  background: url(dropdown_arw.png) no-repeat right center;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  width: 90px;
  text-indent: 0.01px;
  text-overflow: "";
}

demo page - http://kvijayanand.in/jquery-plugin/test.html

Updated

here is solution for Firefox 30. little trick for custom select elements in firefox :-moz-any() css pseudo class.

http://blog.kvijayanand.in/customize-select-arrow-css/

User · Answer

What Arne said - you can t reliably style select boxes and have them look anything like consistent across browsers   Uniform  https   github com pixelmatrix uniform is a javascript solution which gives you good graphic control over your form elements - it s still Javascript  but it s about as nice as javascript gets for solving this problem

User · Answer

Generally  it s considered a bad practice to style standard form controls because the output looks so different on each browser  See  http   www 456bereastreet com lab styling-form-controls-revisited select-single  for some rendered examples   That being said  I ve had some luck making the background color an RGBA value    lt  DOCTYPE html gt   lt html gt     lt head gt       lt style gt        body           background   d00                select           background  rgba 255 255 255 0 1  url  http   www google com images srpr nav logo6g png   repeat-x 0 0           padding 4px           line-height  21px          border  1px solid  fff               lt  style gt     lt  head gt     lt body gt       lt select gt         lt option gt Foo lt  option gt         lt option gt Bar lt  option gt               lt option gt Something longer lt  option gt          lt  body gt   lt  html gt    Google Chrome still renders a gradient on top of the background image in the color that you pass to rgba r g b 0 1  but choosing a color that compliments your image and making the alpha 0 1 reduces the effect of this

User · Answer

select        -webkit-appearance  none      If you need to you can also add an image that contains the arrow as part of the background

[css] Background Image for Select (dropdown) does not work in Chrome

Examples related to css

Examples related to google-chrome