Как сделать стрелку красной? и разделитель?
1 ответ
Есть множество способов. Например, делаете свою картинку со стрелкой и бордюром слева и воспроизводите это на html
и css
.
Как пример:
.styled-select {
width: 240px;
height: 34px;
overflow: hidden;
background: url(http://s020.radikal.ru/i721/1511/76/e3954f44bd13.png) no-repeat right #ddd;
background-size: 10%;
border: 1px solid #ccc;
position: relative;
}
.styled-select select {
background: transparent;
width: 268px;
padding: 5px;
font-size: 16px;
line-height: 1;
border: 0;
border-radius: 0;
height: 34px;
-webkit-appearance: none;
}
<div class="styled-select">
<select>
<option>Here is the first option</option>
<option>The second option</option>
</select>
</div>
А можно воспользоваться множеством плагинов. Каким угодно на любой вкус, вот к примеру плагин от jquery
:
http://www.bulgaria-web-developers.com/projects/javascript/selectbox/ https://code.google.com/p/select-box/
Но проще css
чтоб не загружать лишним свой проект
-
проблемы возникают при margin-left:100px; Почему? как то странно видится первый селект с не нужным отступом– Stein_14 ноя 2015 в 18:40
-
ставлю margin-left: 100px; width: 340px; и селект перестает работать- в чем секрет?– Stein_14 ноя 2015 в 18:43
-
-
jsfiddle.net/uEj5G при огромном выбранном option в селект выбирается он и содержимое вылазит на стрелку. а редактирование .styled-select option { width:xxx} не помогает. СПАСИБО заранее– Stein_14 ноя 2015 в 18:50
-
В вашей ссылке нет селекта. Только два дива. Приведите полный пример кода 14 ноя 2015 в 18:53