Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.80/5: Рейтинг темы: голосов - 5, средняя оценка - 4.80
Radioaktiv
0 / 0 / 4
Регистрация: 09.10.2015
Сообщений: 306
1

Стилизация select

26.02.2017, 14:03. Просмотров 868. Ответов 5
Метки нет (Все метки)

всем привет, подскажите пожалуйста, как сделать такой select , как на картинке

HTML5
1
2
3
4
5
6
7
8
<select name="city" onchange="checkParams()" id="city">
    <option value="">
        Город
    </option>
    <option value="">
        Москва
    </option>
</select>
0
Миниатюры
Стилизация select  
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
26.02.2017, 14:03
Ответы с готовыми решениями:

Стилизация select на CSS
Здравствуйте. Есть стилизированный селект ...

Стилизация тега <select>
Подскажите как можно стилизовать select.Пробвался js,также CuSel,но при их...

Стилизация текста в теге <select>
Как сделать часть строки в теге SELECT одним цветом, а часть другим &lt;select...

Стилизация шрифта в теге <select>
Почему то не работает такой вариант &lt;select name=&quot;action&quot;&gt; &lt;option...

Кроссбраузерная стилизация select + option
Объясните как задать стили (кроссбраузерно, начиная с IE8) для вот такой вот...

5
mrtoxas
Модератор
Эксперт HTML/CSS
2569 / 1903 / 1184
Регистрация: 12.07.2015
Сообщений: 5,115
Записей в блоге: 3
26.02.2017, 14:17 2
Посмотрите в сторону jQuery UI и подобных плагинов.
0
Radioaktiv
0 / 0 / 4
Регистрация: 09.10.2015
Сообщений: 306
26.02.2017, 15:42  [ТС] 3
а как добавить скрол в выпадающий список?

вызываю вот так
Javascript
1
2
3
4
5
6
7
8
            <script>
$(document).ready(function(){
 $("select").dropdown();
    $("select").selecter({
       mobile: true
    });
});
</script>
выпадающий список вот стиль
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
.selecter-options {
  width: 100%;
  max-height: 260px;
  position: absolute;
  top: 100%;
  left: 0;
  border: 1px solid #cccccc;
  border-width: 0 1px 1px;
  background-color: #ffffff;
  display: none;
  margin: 0;
  padding: 0;
  z-index: 50;
     margin-top: 20px;
    border-radius: 5px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}
.selecter-options::after{
    height: 0;
    width: 0;
    position: absolute;
        top: -10px;
    right: 15px;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 10px solid #fff;
    content: '';
    display: block;
    margin: auto 0;
    z-index:999999999;
}
0
mrtoxas
Модератор
Эксперт HTML/CSS
2569 / 1903 / 1184
Регистрация: 12.07.2015
Сообщений: 5,115
Записей в блоге: 3
26.02.2017, 16:01 4
Задайте фиксированную высоту выпадающему списку.
0
Radioaktiv
0 / 0 / 4
Регистрация: 09.10.2015
Сообщений: 306
26.02.2017, 22:04  [ТС] 5
ставлю
CSS
1
overflow: auto; height:100px;
и после этого пропадает
CSS
1
after
0
mrtoxas
Модератор
Эксперт HTML/CSS
2569 / 1903 / 1184
Регистрация: 12.07.2015
Сообщений: 5,115
Записей в блоге: 3
27.02.2017, 12:20 6
Приведите полный код, который даст возможность воспроизвести проблему.
0
27.02.2017, 12:20
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
27.02.2017, 12:20

Стилизация hr
Здрасте! Вот написал я такой код &lt;div id=&quot;header&quot;&gt; &lt;div...

Как изменить значение одного select-а при изменении другого select-а?
Добрый день! Подскажите как изменить значение select при изменении другого...

Стилизация checkbox
Как дать стиль checkbox, чтобы у него было примерно вот такой стиль? Помогите...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
6
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru