CODEWITHSUNDEEP
jqueryhtmlcssselect
Amir
Amir

Reputation: 537

Background image on input select

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?

Upvotes: 1

Views: 207

Answers (1)

yuvi
yuvi

Reputation: 18427

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!

Upvotes: 1

Related Questions