Как оформить выпадающий список <select> только с помощью CSS?
Есть ли только CSS-стиль <select> падать?
Мне нужно стилизовать <select> Форма настолько, насколько это возможно, без JavaScript. Какие свойства я могу использовать для этого в CSS?
Этот код должен быть совместим со всеми основными браузерами:
- Internet Explorer 6,7 и 8
- Fire Fox
- Сафари
Я знаю, что могу сделать это с помощью JavaScript: пример.
И я не говорю о простом оформлении. Я хочу знать, что лучше всего мы можем сделать только с помощью CSS.
Я нашел похожие вопросы по переполнению стека.
И этот на Doctype.com.
27 ответов
Вот 3 решения:
Решение № 1 - внешний вид: нет - с обходом ie10-11 ( демонстрация)
Чтобы скрыть набор стрелок по умолчанию appearance: none на элементе select, затем добавьте свою собственную стрелку с background-image
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; /* remove default arrow */
background-image: url(...); /* add custom arrow */
}
Поддержка браузера:
appearance: none имеет очень хорошую поддержку браузера ( caniuse) - за исключением ie11- и firefox 34-
Мы можем улучшить эту технику и добавить поддержку ie10 и ie11, добавив
select::-ms-expand {
display: none; /* hide the default arrow in ie10 and ie11 */
}
Если есть проблема с ie9- у нас нет способа убрать стрелку по умолчанию (что означало бы, что теперь у нас будет две стрелки), но мы могли бы использовать прикольный селектор ie9, чтобы хотя бы отменить нашу пользовательскую стрелку - оставив стрелку выбора по умолчанию неповрежденными.
/* target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
select {
background-image:none\9;
padding: 5px\9;
}
}
Все вместе:
select {
margin: 50px;
width: 150px;
padding: 5px 35px 5px 5px;
font-size: 16px;
border: 1px solid #ccc;
height: 34px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url(http://www.stackru.com/favicon.ico) 96% / 15% no-repeat #eee;
}
/* CAUTION: IE hackery ahead */
select::-ms-expand {
display: none; /* remove default arrow in IE 10 and 11 */
}
/* target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
select {
background:none\9;
padding: 5px\9;
}
}<select>
<option>Apples</option>
<option selected>Pineapples</option>
<option>Chocklate</option>
<option>Pancakes</option>
</select>Это решение простое и имеет хорошую поддержку браузера - его должно быть достаточно.
Если необходима поддержка браузера для ie9- и firefox 34-, тогда продолжайте читать...
Решение № 2 Обрезать элемент select, чтобы скрыть стрелку по умолчанию ( демонстрация)
Обернуть select элемент в div с фиксированной шириной и overflow:hidden,
Тогда дайте select Элемент шириной около 20 пикселей больше, чем div.
В результате выпадающая стрелка по умолчанию select элемент будет скрыт (из-за overflow:hidden на контейнере), и вы можете поместить любое фоновое изображение на правой стороне div.
Преимущество этого подхода в том, что он кросс-браузерный (Internet Explorer 8 и более поздние версии, WebKit и Gecko). Однако недостатком этого подхода является то, что выпадающий список опций выступает справа (на 20 пикселей, которые мы спрятали... потому что элементы опций принимают ширину элемента select).
[Следует, однако, отметить, что если пользовательский элемент выбора необходим только для мобильных устройств - то вышеупомянутая проблема не применяется - из-за способа, которым каждый телефон изначально открывает элемент выбора. Так что для мобильных устройств это может быть лучшим решением.]
.styled select {
background: transparent;
width: 150px;
font-size: 16px;
border: 1px solid #ccc;
height: 34px;
}
.styled {
margin: 50px;
width: 120px;
height: 34px;
border: 1px solid #111;
border-radius: 3px;
overflow: hidden;
background: url(http://www.stackru.com/favicon.ico) 96% / 20% no-repeat #eee;
}<div class="styled">
<select>
<option>Pineapples</option>
<option selected>Apples</option>
<option>Chocklate</option>
<option>Pancakes</option>
</select>
</div>Если пользовательская стрелка необходима в Firefox - до версии 35 - но вам не нужно поддерживать старые версии IE - тогда продолжайте читать...
Решение № 3 - Используйте pointer-events собственность ( демо)
Идея состоит в том, чтобы наложить элемент на собственную стрелку раскрывающегося списка (чтобы создать нашу собственную), а затем запретить указатель на него.
Преимущество: хорошо работает в WebKit и Gecko. Это тоже хорошо выглядит (без выступающих option элементы)
Недостаток: Internet Explorer (IE10 и ниже) не поддерживает pointer-events, что означает, что вы не можете нажать на пользовательскую стрелку. Кроме того, еще один (очевидный) недостаток этого метода заключается в том, что вы не можете нацеливать на новое изображение стрелки эффект наведения или курсор в виде руки, потому что мы просто отключили события указателя на них!
Тем не менее, с помощью этого метода вы можете использовать Modernizer или условные комментарии, чтобы Internet Explorer вернулся к стандартному встроенному стрелке.
Примечание: Internet Explorer 10 не поддерживает conditional comments больше: если вы хотите использовать этот подход, вам, вероятно, следует использовать Modernizr. Однако все еще возможно исключить CSS-события указателя из Internet Explorer 10 с помощью хака CSS, описанного здесь.
.notIE {
position: relative;
display: inline-block;
}
select {
display: inline-block;
height: 30px;
width: 150px;
outline: none;
color: #74646e;
border: 1px solid #C8BFC4;
border-radius: 4px;
box-shadow: inset 1px 1px 2px #ddd8dc;
background: #fff;
}
/* Select arrow styling */
.notIE .fancyArrow {
width: 23px;
height: 28px;
position: absolute;
display: inline-block;
top: 1px;
right: 3px;
background: url(http://www.stackru.com/favicon.ico) right / 90% no-repeat #fff;
pointer-events: none;
}
/*target Internet Explorer 9 and Internet Explorer 10:*/
@media screen and (min-width: 0\0) {
.notIE .fancyArrow {
display: none;
}
}<!--[if !IE]> -->
<div class="notIE">
<!-- <![endif]-->
<span class="fancyArrow"></span>
<select>
<option>Apples</option>
<option selected>Pineapples</option>
<option>Chocklate</option>
<option>Pancakes</option>
</select>
<!--[if !IE]> -->
</div>
<!-- <![endif]-->Это возможно, но, к сожалению, в основном в браузерах на основе Webkit в той мере, в которой мы, как разработчики, требуем. Вот пример стилей CSS, собранных из панели параметров Chrome с помощью встроенного инспектора инструментов разработчика, улучшенного для соответствия поддерживаемым в настоящее время свойствам CSS в большинстве современных браузеров:
select {
-webkit-appearance: button;
-moz-appearance: button;
-webkit-user-select: none;
-moz-user-select: none;
-webkit-padding-end: 20px;
-moz-padding-end: 20px;
-webkit-padding-start: 2px;
-moz-padding-start: 2px;
background-color: #F07575; /* fallback color if gradients are not supported */
background-image: url(../images/select-arrow.png), -webkit-linear-gradient(top, #E5E5E5, #F4F4F4); /* For Chrome and Safari */
background-image: url(../images/select-arrow.png), -moz-linear-gradient(top, #E5E5E5, #F4F4F4); /* For old Fx (3.6 to 15) */
background-image: url(../images/select-arrow.png), -ms-linear-gradient(top, #E5E5E5, #F4F4F4); /* For pre-releases of IE 10*/
background-image: url(../images/select-arrow.png), -o-linear-gradient(top, #E5E5E5, #F4F4F4); /* For old Opera (11.1 to 12.0) */
background-image: url(../images/select-arrow.png), linear-gradient(to bottom, #E5E5E5, #F4F4F4); /* Standard syntax; must be last */
background-position: center right;
background-repeat: no-repeat;
border: 1px solid #AAA;
border-radius: 2px;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
color: #555;
font-size: inherit;
margin: 0;
overflow: hidden;
padding-top: 2px;
padding-bottom: 2px;
text-overflow: ellipsis;
white-space: nowrap;
}
Когда вы запускаете этот код на любой странице в браузере на основе Webkit, он должен изменить внешний вид поля выбора, удалить стандартную OS-стрелку и добавить PNG-стрелку, поставить интервал перед и после метки, почти все, что вы хотите.
Самая важная часть appearance свойство, которое изменяет поведение элемента.
Он отлично работает практически во всех браузерах на основе Webkit, включая мобильные, хотя Gecko не поддерживает appearance как и Webkit, кажется.
У меня была именно эта проблема, за исключением того, что я не мог использовать изображения и не был ограничен поддержкой браузера. Это должно быть "по спецификации" и, если повезет, в конце концов начнёт работать везде.
Он использует многослойные повернутые фоновые слои, чтобы "вырезать" стрелку раскрывающегося списка, так как псевдоэлементы не будут работать для элемента select.
Изменить: В этой обновленной версии я использую переменные CSS и крошечная система тем.
:root {
--radius: 2px;
--baseFg: dimgray;
--baseBg: white;
--accentFg: #006fc2;
--accentBg: #bae1ff;
}
.theme-pink {
--radius: 2em;
--baseFg: #c70062;
--baseBg: #ffe3f1;
--accentFg: #c70062;
--accentBg: #ffaad4;
}
.theme-construction {
--radius: 0;
--baseFg: white;
--baseBg: black;
--accentFg: black;
--accentBg: orange;
}
select {
font: 400 12px/1.3 sans-serif;
-webkit-appearance: none;
appearance: none;
color: var(--baseFg);
border: 1px solid var(--baseFg);
line-height: 1;
outline: 0;
padding: 0.65em 2.5em 0.55em 0.75em;
border-radius: var(--radius);
background-color: var(--baseBg);
background-image: linear-gradient(var(--baseFg), var(--baseFg)),
linear-gradient(-135deg, transparent 50%, var(--accentBg) 50%),
linear-gradient(-225deg, transparent 50%, var(--accentBg) 50%),
linear-gradient(var(--accentBg) 42%, var(--accentFg) 42%);
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
background-size: 1px 100%, 20px 22px, 20px 22px, 20px 100%;
background-position: right 20px center, right bottom, right bottom, right bottom;
}
select:hover {
background-image: linear-gradient(var(--accentFg), var(--accentFg)),
linear-gradient(-135deg, transparent 50%, var(--accentFg) 50%),
linear-gradient(-225deg, transparent 50%, var(--accentFg) 50%),
linear-gradient(var(--accentFg) 42%, var(--accentBg) 42%);
}
select:active {
background-image: linear-gradient(var(--accentFg), var(--accentFg)),
linear-gradient(-135deg, transparent 50%, var(--accentFg) 50%),
linear-gradient(-225deg, transparent 50%, var(--accentFg) 50%),
linear-gradient(var(--accentFg) 42%, var(--accentBg) 42%);
color: var(--accentBg);
border-color: var(--accentFg);
background-color: var(--accentFg);
}<select>
<option>So many options</option>
<option>...</option>
</select>
<select class="theme-pink">
<option>So many options</option>
<option>...</option>
</select>
<select class="theme-construction">
<option>So many options</option>
<option>...</option>
</select>Элемент select и его выпадающее меню сложно стилизовать.
Атрибуты стиля для элемента select Криса Хайльмана подтверждают сказанное Райаном Доэри в комментарии к первому ответу:
"Элемент select является частью операционной системы, а не браузера Chrome. Следовательно, его стиль очень ненадежен, и в любом случае не обязательно имеет смысл пробовать".
Самое большое несоответствие, которое я заметил при стилизации выпадающих списков, - это Safari и рендеринг Google Chrome (Firefox полностью настраивается с помощью CSS). После небольшого поиска в глубине Интернета я наткнулся на следующее, что почти полностью решает мои проблемы с WebKit:
Исправление Safari и Google Chrome:
select {
-webkit-appearance: none;
}
Это, однако, удаляет выпадающую стрелку. Вы можете добавить стрелку раскрывающегося списка, используя рядом div с фоном, отрицательным полем или абсолютно расположенным над выпадающим списком.
* Дополнительная информация и другие переменные доступны в свойстве CSS: -webkit-Appearance.
<select> теги можно стилизовать с помощью CSS, как и любой другой элемент HTML на странице HTML, отображаемой в браузере. Ниже приведен (слишком простой) пример, который будет размещать элемент выбора на странице и отображать текст параметров синим цветом.
Пример HTML-файла (selectExample.html):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Select Styling</title>
<link href="selectExample.css" rel="stylesheet">
</head>
<body>
<select id="styledSelect" class="blueText">
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="cherry">Cherry</option>
</select>
</body>
</html>
Пример CSS-файла (selectExample.css):
/* All select elements on page */
select {
position: relative;
}
/* Style by class. Effects the text of the contained options. */
.blueText {
color: #0000FF;
}
/* Style by id. Effects position of the select drop down. */
#styledSelect {
left: 100px;
}
Пользовательские стили Select CSS
Протестировано в Internet Explorer (10 и 11), Edge, Firefox и Chrome
select::-ms-expand {
display: none;
}
select {
display: inline-block;
box-sizing: border-box;
padding: 0.5em 2em 0.5em 0.5em;
border: 1px solid #eee;
font: inherit;
line-height: inherit;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
background-repeat: no-repeat;
background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
background-position: right 15px top 1em, right 10px top 1em;
background-size: 5px 5px, 5px 5px;
}<select name="">
<option value="">Lorem</option>
<option value="">Lorem Ipsum</option>
</select>
<select name="" disabled>
<option value="">Disabled</option>
</select>
<select name="" style="color:red;">
<option value="">Color!</option>
<option value="">Lorem Ipsum</option>
</select>Вот версия, которая работает во всех современных браузерах. Ключ использует appearance:none который удаляет форматирование по умолчанию. Поскольку все форматирование пропало, вы должны добавить обратно стрелку, которая визуально отличает выбор от ввода.
Рабочий пример: https://jsfiddle.net/gs2q1c7p/
select:not([multiple]) {
-webkit-appearance: none;
-moz-appearance: none;
background-position: right 50%;
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDZFNDEwNjlGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFNDEwNkFGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NkU0MTA2N0Y3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NkU0MTA2OEY3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuGsgwQAAAA5SURBVHjaYvz//z8DOYCJgUxAf42MQIzTk0D/M+KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAAMAzNENEOH+do8AAAAASUVORK5CYII=);
padding: .5em;
padding-right: 1.5em
}
#mySelect {
border-radius: 0
}<select id="mySelect">
<option>Option 1</option>
<option>Option 2</option>
</select>Есть способ стилизовать теги SELECT.
Если в теге есть параметр "size", то подойдет практически любой CSS. Используя этот трюк, я создал скрипку, которая практически эквивалентна обычному тегу выбора, плюс значение можно редактировать вручную, как ComboBox на визуальных языках (если только вы не добавили readonly во входной тег).
Итак, вот минимальный пример, чтобы увидеть принцип:
(вам понадобится jQuery для механизма кликов):
<style>
/* only these 2 lines are truly required */
.stylish span {position:relative;}
.stylish select {position:absolute;left:0px;display:none}
/* now you can style the hell out of them */
.stylish input { ... }
.stylish select { ... }
.stylish option { ... }
.stylish optgroup { ... }
</style>
...
<div class="stylish">
<label> Choose your superhero: </label>
<span>
<input onclick="$(this).closest('div').find('select').slideToggle(110)">
<br>
<select size=15 onclick="$(this).hide().closest('div').find('input').val($(this).find('option:selected').text());">
<optgroup label="Fantasy"></optgroup>
<option value="gandalf">Gandalf</option>
<option value="harry">Harry Potter</option>
<option value="jon">Jon Snow</option>
<optgroup label="Comics"></optgroup>
<option value="tony">Tony Stark</option>
<option value="steve">Steven Rogers</option>
<option value="natasha">Natasha Romanova</option>
</select>
</span>
</div>
Вот скрипка с еще несколькими стилями: https://jsfiddle.net/dkellner/7ac9us70/
(Конечно, это переоценено, просто чтобы продемонстрировать возможности.)
Обратите внимание, что теги не инкапсулируют принадлежащие им параметры, как обычно; да, это намеренно, это для стиля. (Хорошо продуманный способ был бы намного менее пригоден для стилизации.) И да, они действительно прекрасно работают таким образом.
Прежде, чем кто-либо укажет на часть NO-JS: я знаю, что вопрос сказал "нет Javascript". Для меня это больше похоже, пожалуйста, не беспокойтесь о плагинах, я знаю, что они могут сделать это, но мне нужен собственный способ. Понятно, никаких плагинов, никаких дополнительных скриптов, только то, что вписывается в тег "onclick". Единственная зависимость - это jQuery, чтобы избежать безумия "document.parentNode.getElementsByTagName". Но это может работать таким образом. Так что да, это собственный тег select с собственным стилем и некоторыми обработчиками onclick. Это явно не "решение Javascript".
Наслаждайтесь!
Я добрался до вашего дела с помощью Bootstrap. Это самое простое решение, которое работает:
select.form-control {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background-position: right center;
background-repeat: no-repeat;
background-size: 1ex;
background-origin: content-box;
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICBpZD0ic3ZnMiIKICAgdmlld0JveD0iMCAwIDM1Ljk3MDk4MyAyMy4wOTE1MTgiCiAgIGhlaWdodD0iNi41MTY5Mzk2bW0iCiAgIHdpZHRoPSIxMC4xNTE4MTFtbSI+CiAgPGRlZnMKICAgICBpZD0iZGVmczQiIC8+CiAgPG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhNyI+CiAgICA8cmRmOlJERj4KICAgICAgPGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPgogICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PgogICAgICAgIDxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4KICAgICAgICA8ZGM6dGl0bGU+PC9kYzp0aXRsZT4KICAgICAgPC9jYzpXb3JrPgogICAgPC9yZGY6UkRGPgogIDwvbWV0YWRhdGE+CiAgPGcKICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjAyLjAxNDUxLC00MDcuMTIyMjUpIgogICAgIGlkPSJsYXllcjEiPgogICAgPHRleHQKICAgICAgIGlkPSJ0ZXh0MzMzNiIKICAgICAgIHk9IjYyOS41MDUwNyIKICAgICAgIHg9IjI5MS40Mjg1NiIKICAgICAgIHN0eWxlPSJmb250LXN0eWxlOm5vcm1hbDtmb250LXdlaWdodDpub3JtYWw7Zm9udC1zaXplOjQwcHg7bGluZS1oZWlnaHQ6MTI1JTtmb250LWZhbWlseTpzYW5zLXNlcmlmO2xldHRlci1zcGFjaW5nOjBweDt3b3JkLXNwYWNpbmc6MHB4O2ZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZTtzdHJva2Utd2lkdGg6MXB4O3N0cm9rZS1saW5lY2FwOmJ1dHQ7c3Ryb2tlLWxpbmVqb2luOm1pdGVyO3N0cm9rZS1vcGFjaXR5OjEiCiAgICAgICB4bWw6c3BhY2U9InByZXNlcnZlIj48dHNwYW4KICAgICAgICAgeT0iNjI5LjUwNTA3IgogICAgICAgICB4PSIyOTEuNDI4NTYiCiAgICAgICAgIGlkPSJ0c3BhbjMzMzgiPjwvdHNwYW4+PC90ZXh0PgogICAgPGcKICAgICAgIGlkPSJ0ZXh0MzM0MCIKICAgICAgIHN0eWxlPSJmb250LXN0eWxlOm5vcm1hbDtmb250LXZhcmlhbnQ6bm9ybWFsO2ZvbnQtd2VpZ2h0Om5vcm1hbDtmb250LXN0cmV0Y2g6bm9ybWFsO2ZvbnQtc2l6ZTo0MHB4O2xpbmUtaGVpZ2h0OjEyNSU7Zm9udC1mYW1pbHk6Rm9udEF3ZXNvbWU7LWlua3NjYXBlLWZvbnQtc3BlY2lmaWNhdGlvbjpGb250QXdlc29tZTtsZXR0ZXItc3BhY2luZzowcHg7d29yZC1zcGFjaW5nOjBweDtmaWxsOiMwMDAwMDA7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmU7c3Ryb2tlLXdpZHRoOjFweDtzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1saW5lam9pbjptaXRlcjtzdHJva2Utb3BhY2l0eToxIj4KICAgICAgPHBhdGgKICAgICAgICAgaWQ9InBhdGgzMzQ1IgogICAgICAgICBzdHlsZT0iZmlsbDojMzMzMzMzO2ZpbGwtb3BhY2l0eToxIgogICAgICAgICBkPSJtIDIzNy41NjY5Niw0MTMuMjU1MDcgYyAwLjU1ODA0LC0wLjU1ODA0IDAuNTU4MDQsLTEuNDczMjIgMCwtMi4wMzEyNSBsIC0zLjcwNTM1LC0zLjY4MzA0IGMgLTAuNTU4MDQsLTAuNTU4MDQgLTEuNDUwOSwtMC41NTgwNCAtMi4wMDg5MywwIEwgMjIwLDQxOS4zOTM0NiAyMDguMTQ3MzIsNDA3LjU0MDc4IGMgLTAuNTU4MDMsLTAuNTU4MDQgLTEuNDUwODksLTAuNTU4MDQgLTIuMDA4OTMsMCBsIC0zLjcwNTM1LDMuNjgzMDQgYyAtMC41NTgwNCwwLjU1ODAzIC0wLjU1ODA0LDEuNDczMjEgMCwyLjAzMTI1IGwgMTYuNTYyNSwxNi41NDAxNyBjIDAuNTU4MDMsMC41NTgwNCAxLjQ1MDg5LDAuNTU4MDQgMi4wMDg5MiwwIGwgMTYuNTYyNSwtMTYuNTQwMTcgeiIgLz4KICAgIDwvZz4KICA8L2c+Cjwvc3ZnPgo=");
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<section class="container">
<form class="form-horizontal">
<select class="form-control">
<option>One</option>
<option>Two</option>
</select>
</form>
</section>Примечание: материал base64fa-chevron-down в SVG.
Сообщение в блоге Как создать выпадающий стиль CSS, у меня не работает JavaScript, но он не работает в Opera:
select {
border: 0 none;
color: #FFFFFF;
background: transparent;
font-size: 20px;
font-weight: bold;
padding: 2px 10px;
width: 378px;
*width: 350px;
*background: #58B14C;
}
#mainselection {
overflow: hidden;
width: 350px;
-moz-border-radius: 9px 9px 9px 9px;
-webkit-border-radius: 9px 9px 9px 9px;
border-radius: 9px 9px 9px 9px;
box-shadow: 1px 1px 11px #330033;
background: url("arrow.gif") no-repeat scroll 319px 5px #58B14C;
}
<div id="mainselection">
<select>
<option>Select an Option</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
В современных браузерах довольно безболезненно <select> в CSS. С appearance: none единственная сложная часть - замена стрелки (если это то, что вы хотите). Вот решение, которое использует встроенный data: URI с открытым текстом SVG:
select {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background-repeat: no-repeat;
background-size: 0.5em auto;
background-position: right 0.25em center;
padding-right: 1em;
background-image: url("data:image/svg+xml;charset=utf-8, \
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'> \
<polygon points='0,0 60,0 30,40' style='fill:black;'/> \
</svg>");
}<select>
<option>Option 1</option>
<option>Option 2</option>
</select>
<select style="font-size: 2rem;">
<option>Option 1</option>
<option>Option 2</option>
</select>Остальная часть стиля (границы, отступы, цвета и т. Д.) Довольно проста.
Это работает во всех браузерах, которые я только что попробовал (Firefox 50, Chrome 55, Edge 38 и Safari 10). Одно замечание о Firefox заключается в том, что если вы хотите использовать # символ в URI данных (например, fill: #000) вам нужно избежать этого (fill: %23000).
select {
outline: 0;
overflow: hidden;
height: 30px;
background: #2c343c;
color: #747a80;
border: #2c343c;
padding: 5px 3px 5px 10px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 10px;
}
select option {border: 1px solid #000; background: #010;}
Редактировать этот элемент не рекомендуется, но если вы хотите попробовать, он похож на любой другой элемент HTML.
Пример редактирования:
/*Edit select*/
select {
/*css style here*/
}
/*Edit option*/
option {
/*css style here*/
}
/*Edit selected option*/
/*element attr attr value*/
option[selected="selected"] {
/*css style here*/
}
<select>
<option >Something #1</option>
<option selected="selected">Something #2</option>
<option >Something #3</option>
</select>
Использовать clip свойство обрезать границы и стрелку select элемент, затем добавьте свои собственные стили замены в оболочку:
<!DOCTYPE html>
<html>
<head>
<style>
select { position: absolute; clip:rect(2px 49px 19px 2px); z-index:2; }
body > span { display:block; position: relative; width: 64px; height: 21px; border: 2px solid green; background: url(http://www.stackru.com/favicon.ico) right 1px no-repeat; }
</style>
</head>
<span>
<select>
<option value="">Alpha</option>
<option value="">Beta</option>
<option value="">Charlie</option>
</select>
</span>
</html>Используйте второй выбор с нулевой непрозрачностью, чтобы сделать кнопку нажатой:
<!DOCTYPE html>
<html>
<head>
<style>
#real { position: absolute; clip:rect(2px 51px 19px 2px); z-index:2; }
#fake { position: absolute; opacity: 0; }
body > span { display:block; position: relative; width: 64px; height: 21px; background: url(http://www.stackru.com/favicon.ico) right 1px no-repeat; }
</style>
</head>
<span>
<select id="real">
<option value="">Alpha</option>
<option value="">Beta</option>
<option value="">Charlie</option>
</select>
<select id="fake">
<option value="">Alpha</option>
<option value="">Beta</option>
<option value="">Charlie</option>
</select>
</span>
</html>Координаты различаются между Webkit и другими браузерами, но запрос @media может покрыть это.
Рекомендации
Если стиль является важной проблемой, использование полностью настраиваемого виджета может помочь, как тот, который описан в сообщении в блоге " Изобретая выпадающий список с помощью CSS и jQuery".
Да. Вы можете стилизовать любой элемент HTML по имени тега, например так:
select {
font-weight: bold;
}
Конечно, вы также можете использовать CSS-класс для стилизации, как и любой другой элемент:
<select class="important">
<option>Important Option</option>
<option>Another Important Option</option>
</select>
<style type="text/css">
.important {
font-weight: bold;
}
</style>
Очень хороший пример, который использует :after а также :before сделать трюк в Styling Select Box с CSS3 | CSSDeck
label {
position: relative;
display: inline-block;
}
select {
display: inline-block;
padding: 4px 3px 5px 5px;
width: 150px;
outline: none;
color: black;
border: 1px solid #C8BFC4;
border-radius: 4px;
box-shadow: inset 1px 1px 2px #ddd8dc;
background-color: lightblue;
}
Это использует цвет фона для выбранных элементов, и я удалил изображение..
Вы также можете добавить стиль наведения в раскрывающемся списке.
select {position:relative; float:left; width:21.4%; height:34px; background:#f9f9e0; border:1px solid #41533f; padding:0px 10px 0px 10px; color:#41533f; margin:-10px 0px 0px 20px; background: transparent; font-size: 12px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url(https://alt-fit.com/images/global/select-button.png) 100% / 15% no-repeat #f9f9e0;}
select:hover {background: url(https://alt-fit.com/images/global/select-button.png) 100% / 15% no-repeat #fff;}<html>
<head>
</head>
<body>
<select name="type" class="select"><option style="color:#41533f;" value="Select option">Select option</option>
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
</select>
</body>
</html>Вот решение, основанное на моих любимых идеях из этого обсуждения. Это позволяет стилизовать элемент напрямую без какой-либо дополнительной разметки.
Работает IE10+ с безопасным запасным вариантом для IE8/9. Одним из предостережений для этих браузеров является то, что фоновое изображение должно быть достаточно маленьким, чтобы скрыться за собственным элементом управления расширением.
HTML
<select name='options'>
<option value='option-1'>Option 1</option>
<option value='option-2'>Option 2</option>
<option value='option-3'>Option 3</option>
</select>
SCSS
body {
padding: 4em 40%;
text-align: center;
}
select {
$bg-color: lightcyan;
$text-color: black;
appearance: none; // using -prefix-free http://leaverou.github.io/prefixfree/
background: {
color: $bg-color;
image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1255/caret--down-15.png");
position: right;
repeat: no-repeat;
}
border: {
color: mix($bg-color, black, 80%);
radius: .2em;
style: solid;
width: 1px;
right-color: mix($bg-color, black, 60%);
bottom-color: mix($bg-color, black, 60%);
}
color: $text-color;
padding: .33em .5em;
width: 100%;
}
// Removes default arrow for IE10+
// IE 8/9 get dafault arrow which covers caret image
// as long as caret image is small than and positioned
// behind default arrow
select::-ms-expand {
display: none;
}
Codepen
Второй метод в ответе Данилда ( /questions/26603996/kak-oformit-vyipadayuschij-spisok-select-tolko-s-pomoschyu-css/26604002#26604002) может быть улучшен для работы с эффектами наведения и другими событиями мыши. Просто убедитесь, что элемент "button" находится сразу после элемента select в разметке. Затем нацельтесь на это, используя + css-селектор:
HTML:
<select class="select-input">...</select>
<div class="select-button"></div>
CSS:
.select-input:hover+.select-button {
[hover styles here]
}
Это, однако, покажет эффект наведения при наведении курсора на элемент выбора, а не только на кнопку.
Я использую этот метод в сочетании с Angular (поскольку мой проект в любом случае оказывается приложением Angular), чтобы охватить весь элемент select, и позволить Angular отображать текст выбранного параметра в элементе "button". В этом случае совершенно логично, что эффект наведения применяется при наведении курсора на любое место над выбранным. Это не работает без JavaScript, поэтому, если вы хотите сделать это, и ваш сайт должен работать без JavaScript, вы должны убедиться, что ваш скрипт добавляет элементы и классы, необходимые для улучшения. Таким образом, браузер без javascript просто получит обычный, не стилизованный элемент select вместо стилизованного значка, который не обновляется правильно.
Вы определенно должны сделать это, как в Styling select, optgroup и options с CSS. Во многих отношениях фоновый цвет и цвет - это как раз то, что вам обычно требуется для настройки параметров, а не всего выбора.
Начиная с Internet Explorer 10, вы можете использовать ::-ms-expand селектор псевдоэлемента для стилизации и скрытия элемента со стрелкой раскрывающегося списка.
select::-ms-expand {
display:none;
/* or visibility: hidden; to keep it's space/hitbox */
}
Остальные стили должны быть похожи на другие браузеры.
Вот базовый форк jsfiddle Данилда, который применяет поддержку IE10
Решение только для CSS и HTML
Кажется, я совместим с Chrome, Firefox и IE11. Но, пожалуйста, оставьте свой отзыв о других веб-браузерах.
Как следует из ответа @Danield, я заключаю свой выбор в div (даже два div для совместимости с x-браузером), чтобы получить ожидаемое поведение.
HTML:
<div class="sort-options-wrapper">
<div class="sort-options-wrapper-2">
<select class="sort-options">
<option value="choiceOne">choiceOne</option>
<option value="choiceOne">choiceThree</option>
<option value="choiceOne">choiceFour</option>
<option value="choiceFiveLongTestPurpose">choiceFiveLongTestPurpose</option>
</select>
</div>
<div class="search-select-arrow-down"></div>
</div>
Обратите внимание на 2 div обертки. Также обратите внимание на добавленный дополнительный div для размещения кнопки со стрелкой вниз, где вам удобно (расположено абсолютно), здесь мы поместили ее слева.
CSS
.sort-options-wrapper {
display: inline-block;
position: relative;
border: 1px solid #83837f;
}
/* this second wrapper is needed for x-browser compatibility */
.sort-options-wrapper-2 {
overflow: hidden;
}
select {
margin-right: -19px; /* that's what hidding the default-provided browser arrow */
padding-left: 13px;
margin-left: 0;
border: none;
background: none;
/* margin-top & margin-bottom must be set since some browser have default values for select elements */
margin-bottom: 1px;
margin-top: 1px;
}
select:focus {
outline: none; /* removing default browsers outline on focus */
}
.search-select-arrow-down {
position: absolute;
height:10px;
width: 12px;
background: url(http://i.imgur.com/pHIYN06.png) scroll no-repeat 2px 0px;
left: 1px;
top: 5px;
}
Чистый кросс-браузерный CSS Выберите стиль управления
Правило №1: НИКОГДА НЕ ИСПОЛЬЗУЙТЕ JAVASCRIPT для оформления HTML-элементов!
Если JS отключен или заблокирован, ваш CSS рухнет и сгорит. Всегда начинайте с чистого CSS , а затем добавляйте любой дополнительный «скриптовый клей», который вы предпочитаете. ПОМНИТЬ!
НЕ взламывайте дизайн элемента управления с помощью хаков JavaScript или CSS, если только вы не считаете, что пользовательский интерфейс должен быть изменен по какой-либо причине (например, удаление стрелки на элементе управления выбора). Этот CSS ниже не делает этого. Он принимает основные ограничения в том, что он может изменить в элементе управления формы select. Я бы все равно начал с моего чистого CSS-решения , а затем наложил сверху любые пользовательские «хаки». Если они потерпят неудачу, ваш CSS изящно вернется к глобальному дизайну CSS, который всегда работает в браузерах более 20 лет... и в будущих!
Приведенный ниже код CSS работает в разных браузерах (с 1990-х по настоящее время) и согласовывает все браузеры, как в прошлом, так и в настоящем , с одним и тем же базовым дизайном CSS. Вы можете настроить этот код по мере необходимости. Вы можете проверить это в очень старых браузерах, и это должно дать вам достойный внешний вид, который соответствует современным браузерам HTML5, что всегда должно быть целью.
/* This CSS works in 20+ years of browsers without hacks, scripts, or tricks. */
body optgroup,
body optgroup:visited,
body optgroup:hover,
body optgroup:focus,
body optgroup:active {
margin: 0;
padding: 0;
font-style: inherit;
font-weight: bold;
cursor: pointer;
background: #fff;
border: none;
}
body optgroup:visited,
body optgroup:hover,
body optgroup:focus,
body optgroup:active {
background: #f9f9ff;
}
body option,
body option:visited,
body option:hover,
body option:focus,
body option:active {
margin: 0;
padding: 0;
cursor: pointer;
background: #fff;
border: none;
}
body option:visited,
body option:hover,
body option:focus,
body option:active {
background: #f9f9ff;
}
body select,
body select:visited,
body select:hover,
body select:focus,
body select:active {
display: inline-block;
width: auto;
height: auto;
min-width: 0;
max-width: none;
padding: .17em .17em;
margin: 0;
text-transform: none;
border-radius: .2em;
border: 2px solid #bbb;
background: #fff;
cursor: pointer;
-webkit-appearance: listbox;
-moz-appearance: listbox;
line-height: normal;
}
body select:visited,
body select:hover,
body select:focus,
body select:active {
background: #f9f9ff;
border: 2px solid #999;
}
body select:focus {
background: #fff;
border: 2px solid #999;
}
body select:required:visited:valid,
body select:required:valid {
background: #fff;
border: 2px solid #7fbe96;
}
body select:required:hover:valid {
background: #f9f9ff;
border: 2px solid #278b3d;
}
body select:required:focus:valid {
background: #fff;
border: 2px solid #278b3d;
}
body select:required:visited:invalid,
body select:required:invalid {
background: #fff;
border: 2px solid #ff6565;
}
body select:required:hover:invalid {
background: #f9f9ff;
border: 2px solid #ce2f2f;
}
body select:required:focus:invalid {
background: #fff;
border: 2px solid #ce2f2f;
}
body select[disabled],
body select[readonly],
body select[disabled="disabled"],
body select[readonly="readonly"],
body select[disabled]:visited,
body select[readonly]:visited,
body select[disabled="disabled"]:visited,
body select[readonly="readonly"]:visited,
body select[disabled]:hover,
body select[readonly]:hover,
body select[disabled="disabled"]:hover,
body select[readonly="readonly"]:hover,
body select[disabled]:focus,
body select[readonly]:focus,
body select[disabled="disabled"]:focus,
body select[readonly="readonly"]:focus,
body select[disabled]:active,
body select[readonly]:active,
body select[disabled="disabled"]:active,
body select[readonly="readonly"]:active {
border: 2px solid #bbb;
background: #f0f0f0;
color: #999;
cursor: default !important;
}