選定標籤上的自定義按鈕（百分比寬度）

我有一個具有固定寬度和百分比的選擇下拉菜單。我有一個自定義按鈕。我想要的是無論選擇的當前寬度，我希望按鈕離開右側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

選定標籤上的自定義按鈕（百分比寬度）

回答

相關問題