0

パーセンテージで固定幅の選択ドロップダウンメニューがあります。そして、私はそれにカスタムボタンを持っています。私が欲しいのは、selectの現在の幅に関係なく、ボタンを右側から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;
}​

これが デモです

私はそれをよりよく示すためにランダムな画像を使用しました。ウィンドウを広げると、パーセンテージで設定されているため、ボタンの位置が変わります。ビューポートのサイズに関係なく、ボタンを右側から絶対20px離して配置したいのですが、どうすればそれを実現できるのかわかりません。

4

1 に答える 1

1

あなたはできる：

  • 右側の画像に20個の透明なピクセルを追加します
  • jQueryでバックグラウンド位置を更新します。
于 2012-08-02T05:30:00.033 に答える