Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.64/11: Рейтинг темы: голосов - 11, средняя оценка - 4.64
23 / 23 / 11
Регистрация: 04.12.2012
Сообщений: 579

Стилизация select на CSS

11.05.2016, 23:50. Показов 2182. Ответов 8
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Здравствуйте. Есть стилизированный селект

http://codepen.io/udyux/pen/KzJQea

Не могу его изменить так, что бы если много элементов, но выводился скролл и пролистывание работало. Он постоянно ломается. Не подскажите, как это можно выполнить?
0
Лучшие ответы (1)
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
11.05.2016, 23:50
Ответы с готовыми решениями:

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

Стилизация select
всем привет, подскажите пожалуйста, как сделать такой select , как на картинке &lt;select name=&quot;city&quot;...

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

8
Эксперт JSЭксперт HTML/CSS
 Аватар для mrtoxas
3827 / 2677 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
12.05.2016, 00:05
Мучай библиотеку jscrollpane
http://bberez.livejournal.com/62388.html
0
333 / 309 / 168
Регистрация: 02.06.2014
Сообщений: 1,130
12.05.2016, 14:20
CSS
1
2
3
4
.select_options{
    max-height: 120px;
    overflow-y: scroll;
}
0
23 / 23 / 11
Регистрация: 04.12.2012
Сообщений: 579
12.05.2016, 14:23  [ТС]
Пробовал так)) Тогда при выборе элемента он не появляется почему-то, не показывается, какой элемент выбран
0
333 / 309 / 168
Регистрация: 02.06.2014
Сообщений: 1,130
12.05.2016, 14:50
Лучший ответ Сообщение было отмечено Dmitrin как решение

Решение

CSS
1
2
3
4
.select_expand:checked + .select_closeLabel + .select_options{
    max-height: 120px;
        overflow-y: scroll;
}
1
23 / 23 / 11
Регистрация: 04.12.2012
Сообщений: 579
12.05.2016, 14:52  [ТС]
Вот теперь отлично)) Спасибо большое))
0
333 / 309 / 168
Регистрация: 02.06.2014
Сообщений: 1,130
12.05.2016, 15:04
Не за что) Но я бы рекомендовал все же плагин, даже банально сделать в jQuery
0
23 / 23 / 11
Регистрация: 04.12.2012
Сообщений: 579
12.05.2016, 15:09  [ТС]
А можете посоветовать какой-нибудь самый простенький select, чтобы вот так с анимацией выпадали элементы и заходили обратно? Возможно, как-то парой строчкой кода можно сделать, чтобы в самом обычном select так можно было сделать?
0
333 / 309 / 168
Регистрация: 02.06.2014
Сообщений: 1,130
12.05.2016, 17:23
Цитата Сообщение от Dmitrin Посмотреть сообщение
самый простенький select,
Пару раз применял всего, названия не помню. В основном самый хороший для меня - это плагин Chosen, но он не простенький
Вот тут почитать
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
12.05.2016, 17:23
Помогаю со студенческими работами здесь

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

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

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

Стилизация круга в css
Есть svg иконка. Нужно сделать круг, в котором она будет размещаться. Применил border-radius, но svg ровно не встает. Что лучше тут...

Стилизация в css grid
есть див с классом кнопка &lt;div class=&quot;knopka&quot;&gt; скажите пожалуйста почему при использовании css grid стилизация работает только так ...


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

Или воспользуйтесь поиском по форуму:
9
Ответ Создать тему
Новые блоги и статьи
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами
8Observer8 20.02.2026
Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .
Конвертировать закладки radiotray-ng в m3u-плейлист
damix 19.02.2026
Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .
Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI
Eddy_Em 18.02.2026
Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .
Камера Toupcam IUA500KMA
Eddy_Em 12.02.2026
Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу
zbw 12.02.2026
И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.
«Знание-Сила»
zbw 12.02.2026
«Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров
8Observer8 12.02.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 11.02.2026
Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru