Question

I have a select dropdown menu that has a fixed width with a percentage. And I have a custom button on it. What I want is regardless of select’s current width, I want the button to stay 20 pixels away from the right side. But I couldn’t find a way to do that because if I use % in background-position property, the button goes far and far when the window is large. And also obviously I can’t use pixels because I’d have to set it for a certain width.

html

<div class="selector">
    <select id="layer" name="layer" class="select-button">
        <option value="0"> 0
        </option>
        <option value="1"> 1
        </option>
        <option value="2"> 2
        </option>
        <option value="3"> 3
        </option>
    </select>
</div>​

css

.selector > .select-button {
background-image: url("../img/actions.png");
background-repeat: no-repeat;
background-color: #ffffff;
background-size: 20px 15px;
background-position: 95% 50% ;
float: right;
width: 45%;
font-size: 16px;
border: 0;
height: 50px;
border-radius: 10px;
border: 5px solid black;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}​

Here’s a
demo

I used a random image to demonstrate it better. As you can see if you widen the window the button position changes since it’s set in percentage. I want to make the button positioned absolute 20px away from right side regardless of viewport size, but don’t know how I can achieve that.

Answer 1

You can:

• add 20 transparent pixels to your image on the right
• update background position with jQuery.