@booogabooo

Как сверстать такой select?

Есть такой шаблон select eb180970140146c1ac5e6ab085b04f22.png

получилось сделать пока так

такая проблема: я не могу сделать расположение кнопки так, как на макете (select должен быть примерно в 2 раза меньше кнопки)
как такое сделать?

<div class="select_main">
					<p></p>
					<select name="version_pledge" id="calc_region_1">
						<option value="">Выберите вариант залога</option>
						<option value="1">Залог автомобиля</option>
						<option value="2">Залог недвижимости</option>
						<option value="3">Залог бизнеса</option>						
					</select>
				</div>


.select_main{
margin:0 auto 10px;
width:140px; 
position:relative; 
border-top:1px solid #999a9a;
border-bottom:1px solid #fff;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
background:#fff url(../img/select-button.png) no-repeat right;
z-index: 100;
}
select {
width:100%; 
height:24px; 
position:reative; 
border:none; 
cursor:pointer; 
opacity:0;
filter: alpha(opacity=0);
}
.select_main p {
width:100%; 
height:100%; 
position:absolute; 
left:0; 
top:0; 
color:#0a0a0a; 
font-size:14px; 
line-height:34px; 
overflow:hidden;
}
  • Вопрос задан
  • 521 просмотр
Пригласить эксперта
Ответы на вопрос 1
Используйте form styler и не мучайтесь зря. Переопределить стили плагина проще простого, в том числе и так, как у вас.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы