1

I have a background image I place on my form elements when they're 'dirty' (have unsaved changes). The image uses background-position: right center.

However, in Safari, the image displays underneath the black triangle, and when I mouse over it, the background image (which is small) is covered entirely by the button that appears.

I'm not sure why Safari treats the space inside the button-on-the-right-with-the-triangle as part of the space inside the right border when other browsers start the right-hand side at the left edge of that button. meh.

Is there a CSS way to get the background image to display to the left of the dropdown arrow/button's space? I noticed in my googlings that Safari select elements aren't on speaking terms with padding, so that's out.

Fiddle: http://jsfiddle.net/jinglesthula/uwKpS/

I'm seeing the issue in Safari 5.1.7 Win7 (I don't have access to OSX to test whether it's an issue there).

jinglesthula
  • 4,446
  • 4
  • 45
  • 79
  • Why the downvote? It's a legit question and I've spent some time on it and put what I found so far. – jinglesthula Jun 14 '13 at 21:32
  • You need to post code with your question. Hopefully you can isolate your issue and create a test-case on jsFiddle or jsBin. – dezman Jun 14 '13 at 21:37
  • @jinglesthula The downvote was probably by the same "purist" that downvoted http://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser/9851380#comment25950948_9851380 – Andrew Steitz Sep 03 '13 at 16:43

1 Answers1

0

I know this is an old question but I had the same issue now and I fixed it by resetting the appearances on safari, and other web browsers within the css, here was my solution, hope this helps.

select { 
    /* and then whatever styles you want*/
    background: url(http://farm3.staticflickr.com/2166/2098205368_3e3f6090ac_t.jpg) no-repeat right #fff;
    /* reset the appearances*/
    -moz-appearance: none; 
    -webkit-appearance: none; 
    appearance: none;
    /* and then whatever styles you want*/

    width: 100px;
    padding: 5px;
}