1

<select>-Fieldのスタイルを設定しようとしています。
(これは IE10 専用のページなので、相互運用性は私の 2 番目の関心事です...)

使用:

select
{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url(images/select-open.png), linear-gradient(#e3dfdb 50%, #d3cec8);
  background-position: right center;
  background-repeat: no-repeat;
  border: solid 1px #adadad;
  border-radius: 3px;
  cursor: pointer;
  outline: none;
  padding-bottom: 3px;
  padding-left: 3px;
  padding-right: 20px;
  padding-top: 3px;
}

select::-ms-expand
{
  display: none;
}

私は次のようなものを得ます： Imegが右すぎます

ここで、背景の位置を に変更すると、次のbackground-position: right 10px center;ような結果が得られます白いパディング右。

線形グラデーションを「ずっと」維持しながら、画像を右の境界線から10pxに配置するにはどうすればよいですか? ところで：画像の右側に10pxの透明度を追加することはオプションではないと感じています;-)

4

1 に答える 1

6

あなたがする必要があるのは、コンマを使用して両方の背景の位置を区切ることです..

background-position: FIRST_IMAGE_POSITION, SECOND_IMAGE_POSITION;

したがって、あなたの場合、画像が最初でグラデーションが2番目なので、そうあるべきです..

select {
  background-position: right center, 0 0; 
  /* Use pixels instead of right and center for better control... 
     where 1st parameter is x and the other parameter is y
   */

  /* Rest stays the same */
}
于 2013-07-08T06:07:59.397 に答える