select:focus background image

[DVigneault]

Hey all--I've been using a workaround to style a dropdown list to match the rest of my form.

 

Here's the HTML:

<div class="styled-select">
<select>
<option>kg</option>
<option>lb</option>
</select>
</div>

 

And the CSS:

.styled-select select {
    background: transparent;
    font-size: 16px;
    width: 70px;
    height: 25px;
    border: 0px;
}

.styled-select {
    border:1px solid #aaa;
    position: relative;
    top: 10px;
    display: inline-block;
    height:25px;
    width:50px;
    box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee;
    border-radius:2px;
    overflow: hidden;
    background: url(image.jpeg) no-repeat right #eee;
}

.styled-select select:focus {
    background: url(image.jpeg) no-repeat right #fff;
}

 

Everything is working perfectly except that when I tab to the dropdown list, the background image shifts off to the right by maybe 20px.  Any idea how I make it stay put?

 

Thanks!

 

-d

[avibitton]

add in the css(to the right element)  background-position-x:  XYpx; (XY can be any number) or use precentage like 50%;  first try with 50% i think it should center the background in the X-axis.

good luck .

 

[DVigneault]

Thanks so much for the reply--that looks like it would have worked.  I actually gave up a few hours after I posted and just used jQuery, though.  :-/