3

I have <select> elements of various widths on a site. I want to position a background image 13px from the right-edge of the select width. In pseudo-code:

select {
    background-image: url(../images/select-arrow.png), 
    background-position: center (right - 13px);
}

How would I do this in CSS?

David542
  • 104,438
  • 178
  • 489
  • 842
  • 1
    Not possible. You'll have to give the PNG some transparent padding, or update the position in real time using Javascript – Pekka Jul 06 '12 at 10:54
  • take a look at http://stackoverflow.com/questions/2226666/background-image-for-select-dropdown-does-not-work-in-chrome – Teneff Jul 06 '12 at 10:54

1 Answers1

11

CSS3 redefines the background-property so that you can say:

background-position: right 13px top;

However browsersupport isn't the best atm.

To work around this, you can:

  • add transparent pixels to the image itself and positioning it top right
  • or calculate the position with javascript after the element's width is known

EDIT: You can safely use this feature now.

Christoph
  • 50,121
  • 21
  • 99
  • 128