Выравнивание содержимого в селекторе выпадающего списка

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

Очень просто, проверьте это.

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

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

Answer 2

Пожалуйста, проверьте его. Я не понимаю, я прав или неправ.

.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 */ 
 
}

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