Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.61/18: Рейтинг темы: голосов - 18, средняя оценка - 4.61
2 / 2 / 4
Регистрация: 09.10.2015
Сообщений: 383
1

Стилизация select

26.02.2017, 14:03. Показов 3345. Ответов 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  
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
26.02.2017, 14:03
Ответы с готовыми решениями:

Стилизация <select>
Всем доброго времени суток! Я новичок в веб-разработке, тем не менее достался проект. Вопрос...

Стилизация select на CSS
Здравствуйте. Есть стилизированный селект http://codepen.io/udyux/pen/KzJQea Не могу его...

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

Анимация и стилизация Select
Здравствуйте. Подскажите, как с минимальным количеством кода можно было бы анимировать выпадение и...

5
Модератор
Эксперт JSЭксперт HTML/CSS
3672 / 2575 / 1504
Регистрация: 12.07.2015
Сообщений: 6,567
Записей в блоге: 4
26.02.2017, 14:17 2
Посмотрите в сторону jQuery UI и подобных плагинов.
0
2 / 2 / 4
Регистрация: 09.10.2015
Сообщений: 383
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
Модератор
Эксперт JSЭксперт HTML/CSS
3672 / 2575 / 1504
Регистрация: 12.07.2015
Сообщений: 6,567
Записей в блоге: 4
26.02.2017, 16:01 4
Задайте фиксированную высоту выпадающему списку.
0
2 / 2 / 4
Регистрация: 09.10.2015
Сообщений: 383
26.02.2017, 22:04  [ТС] 5
ставлю
CSS
1
overflow: auto; height:100px;
и после этого пропадает
CSS
1
after
0
Модератор
Эксперт JSЭксперт HTML/CSS
3672 / 2575 / 1504
Регистрация: 12.07.2015
Сообщений: 6,567
Записей в блоге: 4
27.02.2017, 12:20 6
Приведите полный код, который даст возможность воспроизвести проблему.
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
27.02.2017, 12:20

Помощь в написании контрольных, курсовых и дипломных работ здесь.

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

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

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

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


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

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

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