Оформляем Select CSS! Пользовательские стили для Select на CSS
Время чтения: 4 мин.
С приходом CSS3 стало возможным сделать красивый стиль для любого элемента на сайте. Потому что CSS3 даёт широкий спектр возможностей, которые ускоряют процесс разработки дизайна для сайта. Сегодня мы оформим элемент select на CSS. Кто не знает, этот элемент отвечает за выпадающий список на сайте. Многие используют стандартный вид, но его можно изменить, чтобы он подходил по дизайну к Вашему сайту.
Нет ничего лучше, чем увидеть как выглядит список своими глазами:
Смотреть примерСкачать
Вот как выглядит этот Select оформленный на CSS:
Похожие статьи на эту тему:
А сейчас опишу процесс установки по шагам этого выпадающего списка или просто Select.
1 шаг. Подключаем необходимые файлы
Всё просто. После того как скачали архив с исходниками оттуда нам будут нужны 2 файла (style.css и select.js — если подключаете первый вариант списка или select_demo2.js — если подключаете второй вариант). Подключаем эти два файла между тегами <head></head>:
HTML КОД
1 2 | <link rel="stylesheet" type="text/css" href="css/style.css" /> <script type='text/javascript' src='js/select.js'></script> |
2 шаг. HTML структура элемента Select
Ничего сверхсложного в структуре нет (да и откуда ему быть, ведь это просто HTML 🙂 ). Простая форма, внутри которой выпадающий Select с его пунктами:
HTML КОД
1 2 3 4 5 6 7 8 9 10 11 12 | <form action="#">
<p>
<label>Страны Великобритании:</label>
<select>
<option>Пожалуйста, выберите страну:</option>
<option>Англия</option>
<option>Северная Ирландия</option>
<option>Шотландия</option>
<option>Уэльс</option>
</select>
</p>
</form> |
3 шаг. Добавляем стили для Select CSS
Их немного. Я привожу ниже стили для первого варианта списка. Хочу обратить внимание на пути к изображениям. Их всего два: первое для того, чтобы раскрыть список, а второй — чтобы закрыть. Они выглядят в виде двух стрелочек «вверх» и «вниз» соответственно. Их можно скачать в месте с исходниками, которые находятся в начале статьи:
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 | .dropcontainer {
position:relative;
font-size: 16px;
color: #777;
}
.trigger {
color: #777;
padding: 10px;
font-size: 16px;
width: 50%;
background: #fff url(../images/select-arrow-open.png) 98% center no-repeat;
display: block;
border: 1px solid #ccc;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.trigger:hover {
color: #777;
background: #f5f5f5 url(../images/select-arrow-open.png) 98% center no-repeat;
}
.activetrigger {
color: #777;
padding: 10px;
font-size: 16px;
width: 50%;
background: #f5f5f5 url(../images/select-arrow-close.png) 98% center no-repeat;
display: block;
border: 1px solid #ccc;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.activetrigger:hover {
background: #f5f5f5 url(../images/select-arrow-close.png) 98% center no-repeat;
color: #777;
}
.activetrigger:active {
background: #f5f5f5 url(../images/select-arrow-close.png) 98% center no-repeat;
color: #777;
}
.dropcontainer ul {
font-size: 16px;
border: 1px solid #ccc;
border-top: none;
background: #fff;
list-style-type: none;
padding: 10px;
margin: 0;
width: 50%;
z-index: 100;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.dropcontainer ul li {
padding: 5px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.dropcontainer ul li:hover {
background: #f5f5f5;
outline: none;
}
.dropcontainer ul li:first-child {
display: none;
}
.dropcontainer ul li:last-child {
border-bottom: none;
}
.dropdownhidden {
display: none;
}
.dropdownvisible {
height: auto;
} |
В демо примере стили расположены в папке css. Поэтому когда мы задаем путь к папке с изображениями в пути мы сначала пишем «..» (две точки), чтобы выйти на один уровень вверх. А затем заходим в папку images.
Сейчас хочу сказать что можно сделать, чтобы не копировать полностью стили для второго варианта списка (который с фиксированной высотой), а изменить одно свойство и получить фиксированный список.
Вам нужно заменить последнее свойство dropdownvisible:
CSS КОД
1 2 3 | .dropdownvisible {
height: auto;
} |
На это:
CSS КОД
1 2 3 4 | .dropdownvisible {
height: 200px;
overflow-y: scroll;
} |
И если не забудете заменить скрипты (смотрите выше что на что менять), то получите следующее:
В каких браузерах этот Select CSS (выпадающий список) работает нормально?
- ✓ Firefox 24.0, Firefox 25.0, Firefox 26.0
- ✓ Chrome 29.0, Chrome 30.0, Chrome 31.0
- ✓ Opera 12.14, Opera 12.15, Opera 12.16
- ✓ IE 7.0, IE 8.0, IE 9.0, IE 10.0, IE 11.0
- ✓ Safari 5.1, Safari 6.0, Safari 6.1, Safari 7.0
- ✓ Apple IOS – iPhone 4S, iPhone 5, iPad 2 (5.0), iPad 3 (6.0), iPad Mini
- ✓ Android – Sony Experia X10, HTC One X, Kindle Fire 2, Google Nexus
Дополнение к уроку — креативный эффект при наведении + ВИДЕО
В дополнение к уроку хочу рассказать как сделать еще один эффект на сайте очень необычным: эффект при наведении. Посмотрите это короткое видео и всё сами увидите.
Вывод
Еще один элемент сайта — Select можно изменить под свой дизайн на CSS и Javascript. Ничего сложного в процессе установки нет, поэтому у Вас всё получится. Также в качестве дополнения к статье Вы получаете креативный способ при наведении и видео по установке.
Основные пункты статьи, чтобы Вы могли быстро к ним перейти:
- 1 шаг. Подключаем необходимые файлы
- 2 шаг. HTML структура элемент Select
- 3 шаг. Добавляем стили для Select CSS
- В каких браузерах этот Select CSS
- Дополнение к уроку — креативный эффект при наведении + ВИДЕО
Успехов!
Источник: Оригинал
С Уважением, Юрий Немец
sitehere.ru
Стилизация select на CSS
Вы здесь: Главная — CSS — CSS3 — Стилизация select на CSS
Для верстальщика обязательным порядком необходимо уметь стилизовать разные элементы формы. Согласитесь, что вряд ли дизайнер оставит форму, как в браузере, никак не приукрасив.
HTML разметка для select
Тег select поместим внутри тега div с классом select. Создадим две опции, между которыми и должен происходить выбор.
<div>
<select>
<option value="Лимон">Лимон</option>
<option value="Банан">Банан</option>
<option value="Яблоко">Яблоко</option>
</select>
</div>
Вот так select выглядит в браузере Chrome, без стилизации. Однако, с помощью CSS
CSS для select
Зададим блоку select позицию relative, делаем мы это для позиционирования кастомной стрелочки, относительно этого блока.
.select {
position: relative;
}
Стилизуем тег select. С помощью свойства appearance, убираем стандартные стрелочки у элементов формы. Затем добавляем для него вендорные префиксы для браузеров
.select select {
display: block;
width: 100%; /* от ширины блока div */
padding: .75rem 2.5rem .75rem 1rem;/* отступы от текста до рамки */
background: none; /* убираем фон */
border: 1px solid #ccc; /* рамка */
border-radius: 3px;/* скругление полей формы */
-webkit-appearance: none;/* Chrome */
-moz-appearance: none;/* Firefox */
appearance: none;/* убираем дефолнтные стрелочки */
font-family: inherit;/* наследует от родителя */
font-size: 1rem;
color: #444;
}
Воссоздадим убранную стрелочку при помощи псевдоэлемента after, применив разные свойства border. При клике внутри поля, показывается выпадающий список, за исключением при клике по самой стрелочке. Свойство pointer-events: none; отменяет стандартное поведение при клике по элементам, прописав которое, теперь при клике по стрелочке, так же появится, выпадающий список.
.select:after {
content: "";
display: block;
border-style: solid;
border-width: 6px 5px 0 5px;
border-color: #000 transparent transparent transparent;
pointer-events: none;
position: absolute;
top: 50%;
right: 1rem;
z-index: 1;
margin-top: -3px;
}
Как вставить дизайнерскую стрелочку?
Ниже, я приведу два варианта, как вставить уникальную стрелочку, при верстке макета, если её нарисовал дизайнер. Вместо стрелочки на CSS, можно добавить стрелочку в виде картинки в пустые кавычки content.
.select:after {
content: " url(...) ";
}
или вставить картинку в виде фона без повтора.
.select select {
background: url(...) no-repeat;
}
Демонстрация примера
Стилизация select option
Как вы уже заметили, что тег option, остался не стилизованным. Почему его не нужно стилизовать? Дело в том, что браузеры мобильных устройств, по разному отображают опции выбора и совсем не так, как на десктопных. Поэтому пользователи мобильных телефонов, так и так увидели бы выпадающий список без стилизации.
Заключение
Однако лучшим решением на 2019 год – это конвертировать иконку в SVG формат и вставить фоном. Такой вариант, гарантирует качественное изображение на любых разрешениях и разных масштабах.
В видеокурсе «Вёрстка сайта с нуля 2.0», я показываю на живом примере, как верстать сайт по макету.
-
Создано 22.05.2019 10:15:50 -
Михаил Русаков
Создано 22.05.2019 10:15:50
Михаил РусаковКопирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
-
Кнопка:
<a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>Она выглядит вот так:
-
Текстовая ссылка:
<a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>Она выглядит вот так: Как создать свой сайт
- BB-код ссылки для форумов (например, можете поставить её в подписи):
[URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]
myrusakov.ru
CSS оформление select — используем свойство appearance
Очень часто дизайнеры рисуют макеты с нестандартными элементами форм, т.е. оформление чекбоксов, радиокнопок, инпутов и селектов отличается от того, что рендерит браузер по умолчанию. Таким образом, перед верстальщиком возникает задача кастомизировать оформление, в том числе это касается элементов select.
В статье мы рассмотрим, как изменить внешний вид select-ов. Однако мы будем придерживаться следующей идеологии. Кастомизировать имеет смысла только дефолтное свёрнутое состояние селекта, а оформление выпадающего списка должно оставаться стандартным. Поэтому решение, описанное ниже, не подойдет, если вам требуется сложный выпадающий список, например, с иконками или чекбоксами для каждого option.
С другой стороны такой подход позволяет:
1. Не писать javascript код, который эмулировал бы поведение селектов. Вся логика возлагается на браузер. Плагинов на сегодняшний день очень много, но не часто встретишь такой, который обрабатывал бы все крайние случаи, возникающие у пользователя при взаимодействии с этим контролом. Примером такого крайнего случая может служить автоматический выбор положения выпадающего списка (открытие вниз или вверх).
2. Раз за поведение и оформление выпадающего списка отвечает браузер, то и не требуется писать какое-то отдельное решение для мобильных устройств, которое позволяло бы удобно работать с селектами на тач-устройствах с маленькими экранами. Встроенные нативные селекты сами принимают нужный вид, ведь на мобильных платформах уже всё продумано. Например, пользователи iOS при клике по селекту увидят не ваш кастомный список, а стандартный привычный. Пользователям не нужно будет подстраивать своё поведение под ваш конкретный сайт, его поведение будет таким же как на всех других сайтах. И ему это удобно, а ради него вы и делали сайт.
Итак, как уже было сказано, для оформления select достаточно CSS3 свойств.
Основное свойство, которое позволит изменить внешний вид селекта, это appearance. Оно заставляет какой-либо элемент принять вид того, что вы захотите, например, можно заставить див стать кнопкой. Однако в рамках нашей задачи интересно значение none, которое означает, что к элементу вообще не нужно применять какой-либо стиль. Таким образом, мы сможем убрать специфичный для селекта атрибут — стрелочку вниз справа.
.select {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none !important;
}Как видно, убрать стрелку не составило труда, теперь остаётся добавить несколько тривиальных CSS-свойств вроде рамки, шрифта и прочего. Здесь конечно же можно добавить и скругление уголков, и тени и прочее, всё как нарисовал дизайнер в макете. Главное выпадающий список остаётся нативным.
.select {
background: transparent;
display: block;
width: 100%;
border: 1px solid #a7a7a7;
color: #32353a;
font-family: 16/Arial, sans-serif;
font-size: 16px;
line-height: 1.4;
font-weight: normal;
padding: 7px 10px 7px 10px;
height: 36px;
vertical-align: top;
outline: 0;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none !important;
}Теперь остаётся добавить фоном стрелку или какую-либо другую иконку. Использовать фон будем, поскольку псевдоэлементы вроде before и after для селекта работать не будут. Для лучшего отображения сайтов на различных устройствах с разным плотностью пикселей, на различных масштабах и т.п. принято использовать SVG иконки. Поэтому с помощью онлайн URL-encoder для SVG сконвертируем иконку в data URI. При этом важно помнить, что тег SVG должен иметь атрибут xmlns="http://www.w3.org/2000/svg".
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8">
<path fill="#000" fill-rule="evenodd" d="M8,0L4.141,6.993,0.012,0.156Z"/>
</svg>Получится следующий результат.
%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M8,0L4.141,6.993,0.012,0.156Z'/%3E%3C/svg%3E%0AПоскольку стрелка используется нестандартная, то можно переместить её влево или использовать вместо стрелки любое другое изображение, а можно и вовсе обойтись без иконок.
По ссылке ниже приведён рассмотренный в статье пример стилизации select через CSS свойство appearance.
Понравилась статья? — Ставь лайк!
paratapok.ru
HTML, CSS: Делаем стильный тег Select Box с помощью CSS
Мне часто приходится использовать Select Box ( <select>) при создании формы с наличием выпадающего списка. Мне потребовалось время, чтобы выяснить, как легко и просто можно задать стиль Select Box-а с использованием лишь CSS, поскольку некоторые части зависят от браузера, например, выпадание вниз и не редактируются стандартным набором стилей.
Так выглядит Select Box по умолчанию:
Выбор из выпадающего спискаВторой выбор из выпадающего списка
А вот его HTML код:
<select> <option>Выбор из выпадающего списка</option> <option>Второй выбор из выпадающего списка</option> </select>
<select> <option>Выбор из выпадающего списка</option> <option>Второй выбор из выпадающего списка</option> </select> |
В Select-Box-е есть определённые параметры, с помощью которых Вы можете сделать стилизацию select и которые можно настраивать, например, цвет шрифта, границы, цвет, отступы и фон:
Выбор из выпадающего спискаВторой выбор из выпадающего списка
Но раздражающая стрелка выпадающего списка всегда остаётся одной и той же. Не существует прямого способа изменить её стиль, но обходной путь довольно прост.
Сначала нам нужно окружить наш Select Box div-контейнером:
<div> <select> <option>Выбор из выпадающего списка</option> <option>Второй выбор из выпадающего списка</option> </select> </div>
<div> <select> <option>Выбор из выпадающего списка</option> <option>Второй выбор из выпадающего списка</option> </select> </div> |
Далее нужно добавить немного CSS, чтобы убедиться, что элементы Select Box-а оформлены определённым образом:
.new-select-style-wpandyou select { border-radius: 0; background: transparent; height: 34px; padding: 5px; border: 0; font-size: 16px; line-height: 1; -webkit-appearance: none; width: 268px; }
.new-select-style-wpandyou select { border-radius: 0; background: transparent; height: 34px; padding: 5px; border: 0; font-size: 16px; line-height: 1; -webkit-appearance: none; width: 268px; } |
Необходимо убедиться, что Select Box занимает больше места, чем окружающий его div, так, что стрелка по умолчанию исчезает.
Вот новая стрелка, которую я хочу использовать:
Наш div-контейнер должен быть настроен таким образом, чтобы новая стрелка появлялась там, где мы хотим:
.new-select-style-wpandyou { border: 1px solid #CCC; overflow: hidden; height: 34px; background: url(http://wpandyou.ru/wp-content/uploads/2013/01/down_arrow_select.jpg) no-repeat right #DDD; width: 240px; }
.new-select-style-wpandyou { border: 1px solid #CCC; overflow: hidden; height: 34px; background: url(http://wpandyou.ru/wp-content/uploads/2013/01/down_arrow_select.jpg) no-repeat right #DDD; width: 240px; } |
Теперь наш красивый Select Box выглядит так:
Выбор из выпадающего спискаВторой выбор из выпадающего списка
Дизайн стрелки можно скачать в интернете или сделать в фотошопе. Зная этот небольшой обходной путь, вы сможете намного легче задавать стиль Select Box-а в точности так, как вы хотите, чтобы он выглядел, с использованием одного лишь CSS.
Друзья смотрите другие полезные статьи CSS, HTML, jQuery:
Новые материалы для пользователей WordPress:
Удачи и хороших зароботков Друзья!
wpandyou.ru
Стиль для select CSS или как стилизовать выпадающий список – Di-Grand
Для того, чтобы ваша страничка в интернете стала заметной, выделялась на общем фоне, ее надо немного украсить. Современные программные средства предлагают для этого множество способов.
CSS3 предоставляет практически безграничные возможности для оригинального оформления современных сайтов. CSS3 позволяет быстро и довольно просто сделать ваш сайт необычным и запоминающимся.
В этом занятии я продемонстрирую, как с помощью CSS можно изменить внешний вид select (выпадающий список). Его можно сделать нестандартным и эффектным.
Рассмотрим один из способов стилизации выпадающих списков.
2. Способ стилизации select CSS
Сейчас я продемонстрирую, что мы можем получить в результате несложных операций:
Здесь вы можете скачать исходник Select, созданный с помощью CSS:
Скачать: Select CSSСтиль для select CSS или как стилизовать выпадающий список
Скачано: 1927, размер: 7.9 KB, дата: 16.Май.2017Рассмотрим подробнее весь ход создания выпадающего списка.
1 шаг. Подключаем необходимые файлы
В первую очередь необходимо скачать архив с исходными материалами и взять оттуда два файла style.css и select.js или select_demo2.js. Это зависит от того, какой вид списка вы хотите создать. Скаченные файлы включаем между тегами <head></head>:
<link rel=»stylesheet» type=»text/css» href=»css/style.css» /> <script type=’text/javascript’ src=’js/select.js’></script>
<link rel=»stylesheet» type=»text/css» href=»css/style.css» /> <script type=’text/javascript’ src=’js/select.js’></script> |
2 шаг. HTML структура элемента Select
Все очень просто и доступно на языке разметки HTML. Выпадающий список с рядом пунктов.
<form action=»#»> <p> <label>Страны Великобритании:</label> <select> <option>Пожалуйста, выберите страну:</option> <option>Англия</option> <option>Северная Ирландия</option> <option>Шотландия</option> <option>Уэльс</option> </select> </p> </form>
<form action=»#»> <p> <label>Страны Великобритании:</label> <select> <option>Пожалуйста, выберите страну:</option> <option>Англия</option> <option>Северная Ирландия</option> <option>Шотландия</option> <option>Уэльс</option> </select> </p> </form> |
3 шаг. Добавляем стили для Select CSS
Стилей для select CSS не так уж и много. В данном материале приведены стили для первого списка. Запомните, пожалуйста. Есть два пути к изображениям: один раскрывает (стрелка «вверх»), а второй закрывает список (стрелка «вниз»). Эти пути тоже находятся в исходных материалах:
.dropcontainer { position:relative; font-size: 16px; color: #777; } .trigger { color: #777; padding: 10px; font-size: 16px; width: 50%; background: #fff url(../images/select-arrow-open.png) 98% center no-repeat; display: block; border: 1px solid #ccc; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .trigger:hover { color: #777; background: #f5f5f5 url(../images/select-arrow-open.png) 98% center no-repeat; } .activetrigger { color: #777; padding: 10px; font-size: 16px; width: 50%; background: #f5f5f5 url(../images/select-arrow-close.png) 98% center no-repeat; display: block; border: 1px solid #ccc; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .activetrigger:hover { background: #f5f5f5 url(../images/select-arrow-close.png) 98% center no-repeat; color: #777; } .activetrigger:active { background: #f5f5f5 url(../images/select-arrow-close.png) 98% center no-repeat; color: #777; } .dropcontainer ul { font-size: 16px; border: 1px solid #ccc; border-top: none; background: #fff; list-style-type: none; padding: 10px; margin: 0; width: 50%; z-index: 100; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .dropcontainer ul li { padding: 5px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .dropcontainer ul li:hover { background: #f5f5f5; outline: none; } .dropcontainer ul li:first-child { display: none; } .dropcontainer ul li:last-child { border-bottom: none; } .dropdownhidden { display: none; } .dropdownvisible { height: auto; }
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 | .dropcontainer { position:relative; font-size: 16px; color: #777; } .trigger { color: #777; padding: 10px; font-size: 16px; width: 50%; background: #fff url(../images/select-arrow-open.png) 98% center no-repeat; display: block; border: 1px solid #ccc; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .trigger:hover { color: #777; background: #f5f5f5 url(../images/select-arrow-open.png) 98% center no-repeat; } .activetrigger { color: #777; padding: 10px; font-size: 16px; width: 50%; background: #f5f5f5 url(../images/select-arrow-close.png) 98% center no-repeat; display: block; border: 1px solid #ccc; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .activetrigger:hover { background: #f5f5f5 url(../images/select-arrow-close.png) 98% center no-repeat; color: #777; } .activetrigger:active { background: #f5f5f5 url(../images/select-arrow-close.png) 98% center no-repeat; color: #777; } .dropcontainer ul { font-size: 16px; border: 1px solid #ccc; border-top: none; background: #fff; list-style-type: none; padding: 10px; margin: ; width: 50%; z-index: 100; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .dropcontainer ul li { padding: 5px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .dropcontainer ul li:hover { background: #f5f5f5; outline: none; } .dropcontainer ul li:first-child { display: none; } .dropcontainer ul li:last-child { border-bottom: none; } .dropdownhidden { display: none; } .dropdownvisible { height: auto; } |
В демонстрационной версии все стили расположены в папке css.Чтобы отобразить путь к папке сначала указываются «..», чтобы выйти на один уровень вверх, а потом вход в папку images.
Если мы хотим создать список с постоянной высотой, нет нужды копировать все стили, достаточно вместо стиля dropdownvisible вставить:
.dropdownvisible { height: auto; }
.dropdownvisible { height: auto; } |
Также нужно изменить скрипты, согласно, приведенных выше, указаний. В результате получим:
В каких браузерах этот Select CSS (выпадающий список) работает нормально?
- ✓Firefox 24.0, Firefox 25.0, Firefox 26.0
- ✓Chrome 29.0, Chrome 30.0, Chrome 31.0
- ✓Opera 12.14, Opera 12.15, Opera 12.16
- ✓IE 7.0, IE 8.0, IE 9.0, IE 10.0, IE 11.0
- ✓Safari 5.1, Safari 6.0, Safari 6.1, Safari 7.0
- ✓Apple IOS – iPhone 4S, iPhone 5, iPad 2 (5.0), iPad 3 (6.0), iPad Mini
- ✓Android – Sony Experia X10, HTC One X, Kindle Fire 2, Google Nexus
Как видите, с помощью CSS и Javascript очень просто стилизовать выпадающий список Select по своему желанию. Успех вам гарантирован.
di-grand.com
Красивое оформление выпадающего списка на CSS3 и jQuery
@font-face {
font-family: ‘icomoon’;
src:url(‘../fonts/icomoon/icomoon.eot?-rdnm34’);
src:url(‘../fonts/icomoon/icomoon.eot?#iefix-rdnm34′) format(’embedded-opentype’),
url(‘../fonts/icomoon/icomoon.woff?-rdnm34’) format(‘woff’),
url(‘../fonts/icomoon/icomoon.ttf?-rdnm34’) format(‘truetype’),
url(‘../fonts/icomoon/icomoon.svg?-rdnm34#icomoon’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
div.cs-skin-border {
background: transparent;
font-size: 2em;
font-weight: 700;
max-width: 600px;
}
@media screen and (max-width: 30em) {
.cs-skin-border { font-size: 1em; }
}
.cs-skin-border > span {
border: 5px solid #000;
border-color: inherit;
transition: background 0.2s, border-color 0.2s;
}
.cs-skin-border > span::after,
.cs-skin-border .cs-selected span::after {
font-family: ‘icomoon’;
content: ‘\e000’;
}
.cs-skin-border ul span::after {
content: »;
opacity: 0;
}
.cs-skin-border .cs-selected span::after {
content: ‘\e00e’;
color: #ddd9c9;
font-size: 1.5em;
opacity: 1;
transition: opacity 0.2s;
}
.cs-skin-border.cs-active > span {
background: #fff;
border-color: #fff;
color: #2980b9;
}
.cs-skin-border .cs-options {
color: #2980b9;
font-size: 0.75em;
opacity: 0;
transition: opacity 0.2s, visibility 0s 0.2s;
}
.cs-skin-border.cs-active .cs-options {
opacity: 1;
transition: opacity 0.2s;
}
.cs-skin-border ul span {
padding: 1em 2em;
backface-visibility: hidden;
}
.cs-skin-border .cs-options li span:hover,
.cs-skin-border li.cs-focus span {
background: #f5f3ec;
}
2web-master.ru
Стилизация select с помощью CSS — urvanov.ru
Нельзя просто так взять и стилизовать select. Тут нужно идти обходными путями. Допустим, что мы хотим заменить изображение кнопки со стрелочкой вниз в select. Напрямую css не позволяет этого сделать, нам придётся схитрить. Мы поместим select внутрь div-а. У div-а сделаем невидимым содержимое, выходящее за его границу, ( overflow: hidden; ) и зададим ему точные размеры. Сам select сделаем с прозрачным фоном ( background: transparent; ). Теперь можно задать фоновую картинку для div-а и выровнять её вправо, тогда она будет вместо кнопки со стрелкой вниз ( background: url(cbx-selector.png) no-repeat right #c0c3ff; ) и она будет видна сквозь прозрачный фон select-а. Теперь важно задать select-у такую ширину, чтобы кнопка вышла за границу div-а и стала не видна на экране.
Вот итоговый файл стилей:
.form_cbx select { background: transparent; height: 34px; border: 0; /* убираем рамку, рамка будет у div-а такой, какой мы её сделаем. */ width: 750px; } .form_cbx { border: 1px solid #0000ff; /* делаем свою рамку */ overflow: hidden; /* всё, что выходит за границу не показываем */ height: 34px; background: url(cbx-selector.png) no-repeat right #c0c3ff; /* картинка кнопки со стрелкой вниз */ width: 700px; }
.form_cbx select { background: transparent; height: 34px; border: 0; /* убираем рамку, рамка будет у div-а такой, какой мы её сделаем. */ width: 750px; }
.form_cbx { border: 1px solid #0000ff; /* делаем свою рамку */ overflow: hidden; /* всё, что выходит за границу не показываем */ height: 34px; background: url(cbx-selector.png) no-repeat right #c0c3ff; /* картинка кнопки со стрелкой вниз */ width: 700px; } |
И HTML-файл:
<!DOCTYPE html> <html> <head> <title>Стилизация input select css</title> <meta http-equiv=»Content-Type» content=»text/html;charset=utf-8″ /> <link rel=»stylesheet» href=»style.css» /> </head> <body> <p> <a href=»https://urvanov.ru/2015/08/16/%D1%81%D1%82%D0%B8%D0%BB%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F-select-%D1%81-%D0%BF%D0%BE%D0%BC%D0%BE%D1%89%D1%8C%D1%8E-css»>Статья про стилизацию select css</a> </p> <div> <select> <option value=»1″>Первый пункт</option> <option value=»2″>Второй пункт</option> <option value=»3″>Третий пункт</option> <option value=»4″>Четвёртый пункт</option> <option value=»5″>Пятый пункт</option> <option value=»6″>Шестой пункт</option> </select> </div> </body> </html>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html> <head> <title>Стилизация input select css</title> <meta http-equiv=»Content-Type» content=»text/html;charset=utf-8″ /> <link rel=»stylesheet» href=»style.css» /> </head> <body> <p> <a href=»https://urvanov.ru/2015/08/16/%D1%81%D1%82%D0%B8%D0%BB%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F-select-%D1%81-%D0%BF%D0%BE%D0%BC%D0%BE%D1%89%D1%8C%D1%8E-css»>Статья про стилизацию select css</a> </p> <div> <select> <option value=»1″>Первый пункт</option> <option value=»2″>Второй пункт</option> <option value=»3″>Третий пункт</option> <option value=»4″>Четвёртый пункт</option> <option value=»5″>Пятый пункт</option> <option value=»6″>Шестой пункт</option> </select> </div> </body> </html> |
Результат можно посмотреть здесь:
https://urvanov.ru/projects/css-examples/input-type-select/
Поделиться:
urvanov.ru