选定标签上的自定义按钮（百分比宽度）

我有一个具有固定宽度和百分比的选择下拉菜单。我有一个自定义按钮。我想要的是无论选择的当前宽度，我希望按钮离开右侧20个像素。但是我找不到这样做的方法，因为如果我在background-position属性中使用％，那么当窗口很大时，按钮会变得越来越远。显然，我不能使用像素，因为我必须将其设置为一定的宽度。选定标签上的自定义按钮（百分比宽度）

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

这里有一个 demo

我用了一个随机图像来证明它更好。正如你所看到的，如果你扩大了窗口，按钮的位置因百分比设置而改变。无论视口大小如何，我都希望将按钮定位在离右侧20px的位置，但不知道如何实现这一点。

来源

2012-08-02 archvile

您可以：

加20个透明像素图像上使用jQuery权
更新后台位置。

来源

2012-08-02 05:30:00 oburejin

如果它是一个可以工作的子元素，但它是一个背景图像。您无法将余裕留给背景图片。 – archvile 2012-08-02 05:37:27

嗯，好吧，现在我明白你的意思是什么问题，抱歉误会，更新我的答案。 – oburejin 2012-08-02 06:10:54

这是一些很棒的想法。我会用它，谢谢！ – archvile 2012-08-02 06:18:33

选定标签上的自定义按钮（百分比宽度）

回答

相关问题