Question

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?

Answer 1

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.