Как мне оформить выпадающий список <select> , используя только CSS?
https://stackoverflow.com/questions/1895476
-
19-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
Существует ли способ создания стиля только для CSS <select> выпадающий список?
Мне нужно создать стиль <select> формируйте настолько, насколько это в человеческих силах, без какого-либо JavaScript.Какие свойства я могу использовать для этого в CSS?
Этот код должен быть совместим со всеми основными браузерами:
- Internet Explorer 6, 7 и 8
- Firefox
- Сафари
Я знаю, что могу сделать это с помощью JavaScript: Пример.
И я не говорю о простой укладке.Я хочу знать, что самое лучшее мы можем сделать только с помощью CSS.
Я нашел похожие вопросы о переполнении стека.
И этот включено Doctype.com.
Решение
Вот три решения:
Решение №1 - внешний вид:нет - с помощью Internet Explorer 10 - обходной путь 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 имеет очень хорошую поддержку браузера (каниуз) - за исключением Internet Explorer 11 (и более поздних версий) и Firefox 34 (и более поздних версий).
Мы можем улучшить этот метод и добавить поддержку Internet Explorer 10 и Internet Explorer 11, добавив
select::-ms-expand {
display: none; /* Hide the default arrow in Internet Explorer 10 and Internet Explorer 11 */
}
Если Internet Explorer 9 вызывает беспокойство, у нас нет способа удалить стрелку по умолчанию (что означало бы, что теперь у нас будет две стрелки), но мы могли бы использовать простой селектор Internet Explorer 9.
Чтобы, по крайней мере, отменить нашу пользовательскую стрелку - оставив стрелку выбора по умолчанию нетронутой.
/* 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.stackoverflow.com/favicon.ico) 96% / 15% no-repeat #EEE;
}
/* CAUTION: Internet Explorer hackery ahead */
select::-ms-expand {
display: none; /* Remove default arrow in Internet Explorer 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>Это простое решение с хорошей поддержкой браузера - как правило, этого должно быть достаточно.
Если необходима поддержка браузером Internet Explorer 9 (и более поздних версий) и Firefox 34 (и более поздних версий), продолжайте читать...
Решение № 2 Обрежьте элемент select, чтобы скрыть стрелку по умолчанию (ДЕМОНСТРАЦИЯ)
--
Оберните select элемент в div с фиксированная ширина и overflow:hidden.
Затем дайте select элемент шириной около на 20 пикселей больше, чем div.
В результате стрелка раскрывающегося списка по умолчанию в select элемент будет скрыт (из-за overflow:hidden на контейнере), и вы можете разместить любое фоновое изображение, которое вы хотите, в правой части div.
Тот Самый преимущество преимуществом этого подхода является то, что он является кроссбраузерным (Internet Explorer 8 и более поздние версии, Веб-набор, и Геккон).Тем не менее, недостаток преимущество этого подхода заключается в том, что выпадающий список опций выступает с правой стороны (на 20 пикселей, которые мы спрятали...потому что элементы option занимают ширину элемента select).
[Однако следует отметить, что если пользовательский элемент 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.stackoverflow.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 - но вам не нужно поддерживать старые версии Internet Explorer - тогда продолжайте читать...
Решение № 3 - Используйте pointer-events собственность (ДЕМОНСТРАЦИЯ)
--
Идея здесь состоит в том, чтобы наложить элемент поверх собственной стрелки раскрывающегося списка (чтобы создать нашу пользовательскую стрелку), а затем запретить события указателя на него.
Преимущество: Это хорошо работает в WebKit и Gecko.Это тоже выглядит неплохо (не выпирает option элементы).
Недостаток: Internet Explorer (Internet Explorer 10 и ниже) не поддерживает pointer-events, что означает, что вы не можете щелкнуть пользовательскую стрелку.Кроме того, еще одним (очевидным) недостатком этого метода является то, что вы не можете настроить таргетинг на новое изображение стрелки с помощью эффекта наведения курсора или ручного наведения курсора, потому что мы только что отключили для них события указателя!
Однако с помощью этого метода вы можете использовать Modernizer или условные комментарии, чтобы заставить Internet Explorer вернуться к стандартной встроенной стрелке.
Примечание: Поскольку Internet Explorer 10 не поддерживает conditional comments больше:Если вы хотите использовать этот подход, вам, вероятно, следует использовать Модернизация.Тем не менее, все еще возможно исключить 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.stackoverflow.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 Firefox (3.6 to 15) */
background-image: url(../images/select-arrow.png), -ms-linear-gradient(top, #E5E5E5, #F4F4F4); /* For pre-releases of Internet Explorer 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, он должен изменить внешний вид поля выбора, удалить стандартную стрелку ОС и добавить стрелку PNG, добавить некоторый интервал до и после метки, почти все, что вы захотите.
Самая важная часть – это appearance свойство, которое изменяет поведение элемента.
Он отлично работает практически во всех браузерах на базе WebKit, включая мобильные, хотя Gecko не поддерживает appearance как и WebKit, кажется.
Элемент выбора и его выпадающая функция являются трудно поддается стилизации.
атрибуты стиля для выбранного элемента автор: Крис Хейлманн подтверждает то, что сказал Райан Доэри в комментарии к первому ответу:
"Элемент выбора является частью операционной системы, а не браузера Chrome.Следовательно, это очень ненадежный стиль, и в любом случае не обязательно имеет смысл пробовать ".
Самое большое несоответствие, которое я заметил при оформлении раскрывающихся списков выбора, — это Сафари и Гугл Хром рендеринг (Firefox полностью настраивается через CSS).После некоторых поисков в темных глубинах Интернета я наткнулся на следующее, что почти полностью развеяло мои сомнения по поводу WebKit:
Исправление Safari и Google Chrome:
select {
-webkit-appearance: none;
}
Однако при этом стрелка раскрывающегося списка удаляется.Вы можете добавить стрелку раскрывающегося списка, используя ближайший div с фоном, отрицательным полем или абсолютно позиционированным над раскрывающимся списком выбора.
*Дополнительную информацию и другие переменные можно найти в CSS-свойство:-webkit-внешний вид.
<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;
}
У меня была именно такая проблема, за исключением того, что я не мог использовать изображения и не был ограничен поддержкой браузера.Это должно быть «по спецификации» и, если повезет, начать работать везде. в конце концов.
Он использует многослойные повернутые фоновые слои, чтобы «вырезать» стрелку раскрывающегося списка, поскольку псевдоэлементы не будут работать для элемента выбора.
Редактировать: В этой обновленной версии я использую переменные 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>Вот версия, которая работает во всех современных браузерах.Ключ использует 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>Сообщение в блоге Как создать стиль раскрывающегося списка CSS без JavaScript у меня работает, но не получается Опера хотя:
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.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>Примечание:материал base64 fa-chevron-down в СВГ.
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;}
В современных браузерах относительно безболезненно стилизовать <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).
Использовать 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.stackoverflow.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.stackoverflow.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 и других браузерах, но @медиа-запрос может покрыть это.
Рекомендации
Очень хороший пример, который использует :after и :before чтобы сделать этот трюк, нужно Поле выбора стиля с помощью CSS3 | CSSDeck
Да.Вы можете стилизовать любой 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>
Редактировать этот элемент не рекомендуется, но если вы хотите попробовать, это как любой другой элемент 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>
Вам определенно следует сделать это, как в Стилизация select, optgroup и options с помощью CSS.Во многих отношениях цвет фона и цвет — это именно то, что вам обычно нужно для стилизации параметров, а не всего выбора.
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;
}
Здесь используется цвет фона для выбранных элементов, и я удалил изображение.
Начиная с Internet Explorer 10, вы можете использовать ::-ms-expand Селектор псевдоэлемента для стилизации и скрытия элемента со стрелкой раскрывающегося списка.
select::-ms-expand {
display:none;
/* or visibility: hidden; to keep it's space/hitbox */
}
Остальные стили должны быть аналогичны другим браузерам.
Вот базовая вилка jsfiddle Дэниелда, которая поддерживает IE10.
Вот решение, основанное на моих любимых идеях из этого обсуждения.Это позволяет стилизовать элемент <select> напрямую без какой-либо дополнительной разметки.
Он работает с Internet Explorer 10 (и более поздними версиями) с безопасным запасным вариантом для Internet Explorer 8/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>
СКСС
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 Internet Explorer 10 (and later)
// Internet Explorer 8/9 gets the default arrow which covers the caret
// image as long as the caret image is smaller than and positioned
// behind the default arrow
select::-ms-expand {
display: none;
}
КодПен
ЕСТЬ способ стилизации тегов SELECT.
Если в теге есть параметр «размер», подойдет практически любой CSS.Используя этот трюк, я создал скрипт, который практически эквивалентен обычному тегу выбора, плюс значение можно редактировать вручную, как ComboBox на визуальных языках (если вы не добавили только для чтения во входном теге).
Итак, вот минимальный пример, чтобы увидеть принцип:
(вам понадобится 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».Но это может сработать и таким образом.Так что да, это собственный тег выбора со собственным стилем и некоторыми обработчиками onclick.Это явно не «решение Javascript».
Наслаждаться!
Вы также можете добавить стиль наведения в раскрывающийся список.
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>Решение только для CSS и HTML
Кажется, он совместим с Chrome, Firefox и Internet Explorer 11.Но, пожалуйста, оставьте свой отзыв о других веб-браузерах.
Как предложил Ответ Дэниелда, я заключаю свой выбор в div (даже в два div для совместимости с x-браузером), чтобы получить ожидаемое поведение.
См. http://jsfiddle.net/bjap2/.
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>
Обратите внимание на две оболочки 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 is hiding the default-provided browser arrow */
padding-left: 13px;
margin-left: 0;
border: none;
background: none;
/* margin-top & margin-bottom must be set since some
browsers 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;
}
Третий метод в Ответ Дэниелда может быть улучшен для работы с эффектами наведения и другими событиями мыши.Просто убедитесь, что элемент «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), чтобы охватить весь элемент выбора и позволить Angular отображать текст выбранной опции в элементе «кнопка».В этом случае совершенно логично, что эффект наведения применяется при наведении курсора на любое место выделения.
Однако он не работает без JavaScript, поэтому, если вы хотите это сделать, а ваш сайт должен работать без JavaScript, вам следует убедиться, что ваш скрипт добавляет элементы и классы, необходимые для улучшения.Таким образом, браузер без JavaScript просто получит обычный, нестилизованный элемент выбора вместо стилизованного значка, который не будет корректно обновляться.
Пользовательский выбор стилей 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>