具有百分比宽度的选择标记上的自定义按钮

Question

我有一个选择下拉菜单，它有一个固定的宽度和百分比。我在上面有一个自定义按钮。我想要的是，无论选择的当前宽度如何，我都希望按钮与右侧保持20像素的距离。但我找不到这样做的方法，因为如果我在后台位置属性中使用%，当窗口很大时，按钮会越来越远。而且很明显，我不能使用像素，因为我必须将其设置为一定的宽度。

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;
}​

这是一个演示

我用了一张随机的图片来更好地展示它。正如你所看到的，如果你扩大窗口，按钮的位置会改变，因为它是以百分比设置的。无论视口大小，我都想让按钮的位置离右侧绝对20像素，但不知道如何实现。

Answer 1

您可以：

• 为右侧的图像添加20个透明像素
• 使用jQuery更新后台位置