下拉选择器中的内容对齐方式

Question

我创建了一个下拉选择器，用于选择合适的产品数量。

<div class="newSelectQty" style="display: inline-block; vertical-align: middle; line-height: 1;">
                <select id="quantitySelector" class="quantityWrapper">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                    </select>
            </div>

我已按照以下方式设置了它们的样式，并且我用精灵图像更改了选择器中的箭头。

.newSelectQty select{
background: transparent url(../img/sprite.png) no-repeat right center;
background-position: 0 -35px; width: 30px;
width: 75px;
text-align: center;
color:#777777;
font-size: 13px;
text-align: center;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
height:25px; }

结果是这样的：

如何使箭头对齐右侧，而值（1,2,3,4,5）可以在右侧有一些空格，使其不太靠近左边界？如何将中间的选择器框与“数量”一词对齐？非常感谢！

Answer 1

很简单，请检查一下。

＆＃13;

＆＃13;

#selectbox{
margin:0 auto;
text-align:center;  
width:auto; 
height:25px; 
}
.newSelectQty select{
background:url(http://s30.postimg.org/simmn8cg1/down_arrow.png) no-repeat right;
width: 75px;
text-align: center;
padding-left:10px;
color:#777777;
font-size: 13px;
text-align: center;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
height:25px; 
-webkit-appearance: none;
background-position-x: 50px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
border: 1px solid #ccc;
}
.newSelectQty option{
text-indent:10px; 
}
.qnt{
margin-right:5px;
text-transform:uppercase;
font-size: 16px;
}

＆＃13;

<div id="selectbox">
<label class="qnt">Quantity</label>
<div class="newSelectQty" style="display: inline-block; vertical-align: middle; line-height: 1;">
<select id="quantitySelector" class="quantityWrapper">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

请检查一下。我不明白我是对还是错。

＆＃13;

＆＃13;

.formBox{
  display: block; 
}
label,
 select{
   display: inline-block;
   vertical-align: middle;
 }
select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-attachment: scroll;
  background-color: #ffffff;
  background-image: url(http://rgb.vn/ideas/wp-content/themes/rgb2014/images/iconArrow_on.png);
  background-position: right 15px center;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  border: 1px solid #cccccc;
  height: 34px;
  padding: 6px 12px;
  text-align: center;
  width: 200px;
}
select option{
  padding: 4px 0; /* Firefox only */
}

＆＃13;

<div class="formBox">
  <label>Quantity:</label>
  <select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
  </select>
</div>

＆＃13;

＆＃13;

＆＃13;