title: Custom button on a select tag with a percentage width
body: <p>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.</p>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;div class="selector"&gt;
      &lt;select id="layer" name="layer" class="select-button"&gt;
          &lt;option value="0"&gt; 0
          &lt;/option&gt;
          &lt;option value="1"&gt; 1
          &lt;/option&gt;
          &lt;option value="2"&gt; 2
          &lt;/option&gt;
          &lt;option value="3"&gt; 3
          &lt;/option&gt;
      &lt;/select&gt;
  &lt;/div&gt;​
  </code></pre>
  
  <p><strong>css</strong></p>
  
  <pre><code>.selector &gt; .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;
  }​
  </code></pre>
  
  <p>Here's a 
  <a href="http://jsfiddle.net/AfSNS/" rel="nofollow">demo</a></p>
  
  <p>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.</p>