0

Select

Как сделать стрелку красной? и разделитель?

1 ответ 1

2

Есть множество способов. Например, делаете свою картинку со стрелкой и бордюром слева и воспроизводите это на 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>

jsfiddle

А можно воспользоваться множеством плагинов. Каким угодно на любой вкус, вот к примеру плагин от jquery:

http://www.bulgaria-web-developers.com/projects/javascript/selectbox/ https://code.google.com/p/select-box/

Но проще css чтоб не загружать лишним свой проект

9
  • проблемы возникают при margin-left:100px; Почему? как то странно видится первый селект с не нужным отступом
    – Stein_
    14 ноя 2015 в 18:40
  • ставлю margin-left: 100px; width: 340px; и селект перестает работать- в чем секрет?
    – Stein_
    14 ноя 2015 в 18:43
  • @Stein_ Где ставите конкретно? Пример? 14 ноя 2015 в 18:47
  • jsfiddle.net/uEj5G при огромном выбранном option в селект выбирается он и содержимое вылазит на стрелку. а редактирование .styled-select option { width:xxx} не помогает. СПАСИБО заранее
    – Stein_
    14 ноя 2015 в 18:50
  • В вашей ссылке нет селекта. Только два дива. Приведите полный пример кода 14 ноя 2015 в 18:53

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.