Background image on input select

Question

I'm using gravity form on my website and i added background image for my drop down list, but i just realized the IE8 can't show my background,

here is the image

the correct should be like this:

here is the code:

.page-id-318 #input_5_1{
    -webkit-appearance: none;
 -moz-appearance: none;
  color: #828988;
  padding: 8px 8px 8px 8px;
  font-size: 12px;
  text-align: left;
  border-radius: 0 !important;
  background: url(images/down.png) no-repeat right white !important;
  background-position:100% 50%;
  border: 1px solid #e8e1d7;
  height: 32px;
  overflow: hidden;
  width: 100% !important;
}

The thing is, background image should be above the all other items. thoughts?

This might seem unrelated at first - but did you remember to include the ` ` at the top of the page? — yuvi, May 06 '14 at 18:08

score 1 · Answer 1 · edited May 23 '17 at 12:11

Don't support IE8.

You might find some workaround (there are some scripts claiming to help you with this, though I can't vouch for them), but the fact is, IE8 is used by less than 2.4 percent of total internet usage. It's better if you use some conditional comments to give IE8 its own styling. It would be uglier (of course it will be), but there's just so much you can do with such an old browser.

Another suggestion - in one of my projects, I used javascript that detected the browser, and let users who insisted on using older browser download chrome frame, so they can experience the website like the rest of the users. It might require extra action on the user's part (and the project has stopped being supported, though still available) but, again, it's the most sensible idea I could find (and it also made my life as a developer a lot easier).

Not exactly a perfect answer, but hopefully you'll find it helpful. Good luck!

Background image on input select

1 Answers1