How can I keep a custom button positioned 20 pixels away from the right side of a select dropdown menu with a fixed width percentage? Using percentages in the background-position property makes the button move too far when the window is large. Setting the position in pixels is not an option because it would only work for a specific 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;
}
Check out the demo
With a random image as an example, you can see the button's position change when the window is resized due to the percentage-based setup. Is there a way to make the button stay a fixed 20px away from the right side regardless of viewport size?