Menu
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;} 
637
Add <img> tag in dropdown content to insert image into dropdown list for each items.
Choose a background themeChoose a background image that appears when you open a new tab. Settings. to open the Chrome Web Store. On the left, click Themes and select a theme.
Set a background image using the HTML body elementAdd the bgproperties="fixed" code into the body element, as shown below. Next, add the background="location" attribute to the body tag, where location is the relative or absolute URL of the image. In the above example, background="bg.
select { -webkit-appearance: none; } If you need to you can also add an image that contains the arrow as part of the background.
153
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.
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
