Как оформить раскрывающийся список <select> только с помощью CSS?


1333

Есть ли CSS-стиль для <select>выпадающего меню?

Мне нужно <select>максимально стилизовать форму, без использования JavaScript. Какие свойства я могу использовать для этого в CSS?

Этот код должен быть совместим со всеми основными браузерами:

  • Internet Explorer 6, 7 и 8
  • Fire Fox
  • Сафари

Я знаю, что могу сделать это с помощью JavaScript: Пример .

И я не говорю о простом оформлении. Я хочу знать, что лучшее, что мы можем сделать только с CSS.

Я нашел похожие вопросы по переполнению стека.

И этот на Doctype.com.


1
в гугле ничего особенного не найдено, только решение js есть
Jitendra Vyas

41
Я чувствую, что это законный вопрос, но ответ «нет, не совсем» или «не так, как вы этого хотите». Но никто (ни я) не уверен на 100% в этом, это чувство двусмысленности заползает под кожу читателя, и законность вопроса ставится под сомнение.
ZJR

1
@Jitendra, я знаю, к чему ты клонишь. Мы будем рады, если вы сделаете свой вопрос более четким. Кроме того, я думаю, что нашел то, что вы могли искать. Это экспериментально, но проверьте это: cappuccino.org/aristo/showcase
jeremyosborne

1
@jeremyosborne - Спасибо за ответ. Я знаю, что могу сделать это с помощью JavaScript. Ваша ссылка на основе основана на JS. Почему я задал этот вопрос, потому что я хотел знать, есть ли кто-нибудь, кто знает о том, что лучше всего мы можем сделать только с css
Jitendra Vyas

@Jitendra Спасибо за обновление вашего вопроса. Лучшее, что вы можете надежно сделать с имеющимися у вас ограничениями (только CSS и без JS), - это изменить цвета шрифта (шрифта), фона и переднего плана (текста), размер рамки, внешний вид и цвета, размещение и размер (обычно с помощью типа). настройка через шрифт). Даже тогда вам, вероятно, придется сделать несколько настроек, чтобы убедиться, что все браузеры выглядят одинаково. Хотел бы я знать о лучшем ответе, чем этот, и, возможно, есть один, который я пропустил, но я так не думаю.
Jeremyosborne

Ответы:


1028

Вот три решения:

Решение № 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имеет очень хорошую поддержку браузера ( caniuse ) - за исключением 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;
    }
}

Все вместе:

Это решение простое и имеет хорошую поддержку браузера - его должно быть достаточно.


Если необходима поддержка браузером Internet Explorer 9 (и более поздних версий) и Firefox 34 (и более поздних версий), продолжайте читать ...

Решение № 2 Обрезать элемент select, чтобы скрыть стрелку по умолчанию ( демонстрация )

-

(Подробнее читайте здесь)

Оберните selectэлемент в div с фиксированной шириной иoverflow:hidden .

Затем дайте selectэлементу ширину около 20 пикселей больше, чем div .

В результате стрелка раскрывающегося списка selectэлемента по умолчанию будет скрыта (из-заoverflow:hidden на контейнере), и вы можете поместить любое фоновое изображение, которое вы хотите, справа от div.

Преимущество этого подхода состоит в том, что он является кросс-браузер (Internet Explorer 8 , а затем, WebKit и Gecko ). Однако недостатком этого подхода является то, что выпадающий список опций выступает справа (на 20 пикселей, которые мы спрятали ... потому что элементы опций принимают ширину элемента select).

Введите описание изображения здесь

[Следует, однако, отметить, что если пользовательский элемент выбора необходим только для мобильных устройств - тогда вышеупомянутая проблема не применяется - из-за способа, которым каждый телефон изначально открывает элемент выбора. Так что для мобильных устройств это может быть лучшим решением.]


Если пользовательская стрелка необходима в Firefox - до версии 35 - но вам не нужно поддерживать старые версии Internet Explorer - тогда продолжайте читать ...

Решение № 3 - Использование pointer-eventsсобственности ( демо )

-

(Подробнее читайте здесь)

Идея здесь состоит в том, чтобы наложить элемент на собственную стрелку раскрывающегося списка (чтобы создать нашу собственную) и затем запретить события указателя на нем.

Преимущество: хорошо работает в WebKit и Gecko. Это выглядит хорошо (без выступающих optionэлементов).

Недостаток: Internet Explorer (Internet Explorer 10 и ниже) не поддерживаетpointer-events , что означает, что вы не можете щелкнуть пользовательскую стрелку. Кроме того, еще один (очевидный) недостаток этого метода заключается в том, что вы не можете нацеливать на новое изображение стрелки эффект наведения или курсор в виде руки, потому что мы просто отключили события указателя на них!

Тем не менее, с помощью этого метода вы можете использовать Modernizer или условные комментарии, чтобы Internet Explorer вернулся к стандартному встроенному стрелке.

NB. Поскольку Internet Explorer 10 больше не поддерживает conditional comments: если вы хотите использовать этот подход, вам, вероятно, следует использовать Modernizr . Однако все еще возможно исключить CSS-события указателя из Internet Explorer 10 с помощью хака CSS, описанного здесь .


1
Какой из этих двух способов лучше всего подходит вам?
Джитендра Вьяс

3
Это зависит от требований к дизайну. Если вы согласны с выпадающим выпадающим списком - тогда это лучше, потому что это кросс-браузер (все браузеры IMO + IE8 + можно считать кросс-браузерными), но я думаю, что многим - это не подойдет. Так что на самом деле в моем утверждении выше я имел в виду, что aprroach # 2 был лучшим.
Данилд

4
Кроме того, сценарий, который я опубликовал, использует подход № 2 с условными операторами, чтобы позволить IE использовать свою стрелку по умолчанию.
Данилд

3
@AlexisLeclerc Исправление div и select на одинаковую ширину работает только в браузерах -webkit, таких как Chrome. (потому что я включил правило - webkit-creation: none; ) Однако это не работает в других браузерах, таких как firefox
Danield

4
Если я могу предложить улучшение для подхода № 1, я лично нахожу отсутствие границы или отсутствие ореола выбора с правой стороны очень раздражающим. Я обновил вашу скрипку тем, что использовал в своем текущем проекте: jsfiddle.net/YvCHW/1745 . Скажи мне, что ты думаешь!
Алексис Леклерк

233

Это возможно, но, к сожалению, в основном в браузерах на основе 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, он должен изменить внешний вид поля выбора, удалить стандартную OS-стрелку и добавить PNG-стрелку, поставить интервал перед и после метки, почти все, что вы захотите.

Самая важная часть - это appearanceсвойство, которое меняет поведение элемента.

Он отлично работает практически во всех браузерах на основе WebKit, включая мобильные, хотя appearance, похоже , Gecko не поддерживает так же хорошо, как и WebKit.


4
Привет, я заметил, что блоки выбора начали выглядеть совсем иначе, чем в Firefox 12 (он выглядит много как Chrome (у меня Mac)), и кажется, что FF 12 поддерживает намного больше атрибутов внешнего вида.
CWSpear

3
решение только для хрома ... я бы за это не заплатил, ни мой клиент. см. ответ @ Dianeld для решения x-browser.
Адриен Бе

41
@AdrienBe Мое решение было предложено почти 3 года назад; в то время это был единственный разумный способ изменить стиль блоков выбора без использования библиотек JavaScript или плагинов. Он по-прежнему жизнеспособен, если вы решите удалить префиксные атрибуты, но он надежно работает только в браузерах на основе Webkit (например, Safari, новая Opera + Android). Прямо сейчас, возможно, есть лучшие решения, поэтому вместо добавления бессмысленных комментариев просто проголосуйте за решение, которое вы считаете более подходящим, и в будущем проверьте дату «ответа». Спасибо.
Мэтью Морек

4
@MatthewMorek: было лучшее решение, даже 3 года назад. Ответ Даниэля гораздо лучше в отношении кросс-браузерной поддержки (он поддерживает IE8 и более поздние версии, WebKit и Gecko). Вопрос задал вопрос: «Код должен быть совместим со всеми основными браузерами: Internet Explorer 6,7 и 8, Firefox & Safari». Это требование к x-браузеру могло быть добавлено Полом Свиттом в 2013 году, хотя ... извините, если это так.
Адриен Бе

3
Если вы добавите, text-indent: 0.01px; text-overflow: "";это будет работать еще лучше
Иван

64

Выберите элемент и его выпадающая особенность является трудно стилем.

Атрибуты стиля для элемента select Криса Хайльмана подтверждают сказанное Райаном Доэри в комментарии к первому ответу:

«Элемент select является частью операционной системы, а не браузера Chrome. Следовательно, его стиль очень ненадежен, и в любом случае не обязательно имеет смысл пробовать».


47

У меня была именно эта проблема, за исключением того, что я не мог использовать изображения и не был ограничен поддержкой браузера. Это должно быть «по спецификации», и, если повезет, со временем все начнёт работать .

Он использует многослойные повернутые фоновые слои, чтобы «вырезать» стрелку раскрывающегося списка, поскольку псевдоэлементы не будут работать для элемента 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>


5
Вау, это одно из самых крутых решений, которое я видел. Это работает для меня в последних версиях Chrome и Safari на Mac. Как насчет других браузеров?
Tintin81

2
У меня работает в Firefox с добавлением-moz-appearance: none;
Зак

45

Самое большое несоответствие, которое я заметил при стилизации выпадающих списков, - это Safari и Google Chrome. рендеринг (Firefox полностью настраивается с помощью CSS). После небольшого поиска в глубине Интернета я наткнулся на следующее, что почти полностью решает мои проблемы с WebKit:

Исправление Safari и Google Chrome :

select {
  -webkit-appearance: none;
}

Это, однако, удаляет стрелку раскрывающегося списка. Вы можете добавить стрелку раскрывающегося списка, используя рядомdiv объект с фоном, отрицательным полем или абсолютно расположенный над выпадающим списком.

* Дополнительная информация и другие переменные доступны в свойстве CSS: -webkit-Appearance .


1
Не забудьте добавить свой стиль после этого;) Но я очень рад, что прочитал этот комментарий сегодня.
teewuane

1
не могли бы вы уточнить ваше утверждение: «Firefox полностью настраивается с помощью CSS», мне кажется, что Firefox не поддерживает свойство Appearence ... так как бы это сделать в Firefox?
Данилд

36

<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;
}

30
Удивительно, но в первый раз я увидел, что в Интернете участвуют «мамы», но при этом они не грубят. +1 за это!
Бал

34
Этот ответ не решает этот вопрос. Это только стили выбора ввода, но не раскрывающийся
список

14
Этот ответ полностью игнорирует проблемы стилизации выпадающего списка для согласованности между браузерами. Это очень простой ответ.
BentOnCoding

18

Сообщение в блоге Как создать форму в стиле 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>


17

Вот версия, которая работает во всех современных браузерах. Ключ использует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>


16

Я добрался до вашего дела с помощью 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>

Примечание: материал base64 находится fa-chevron-downв SVG.


12

В современных браузерах стилизация <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).


1
Вы также можете изменить размер SVG с помощью атрибута heightand / or тега вместо свойства CSS . width<svg>background-size
Гитаарик

10
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;}

Ничего не могу выбрать с этим с текущим Chrome.
Виталий Зданевич

9

Пользовательский выбор стилей 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>


Чуть более адаптируемый (но не проверенный во всех браузерах):background-position: right 15px center, right 10px center;
Робин Стюарт

8

Используйте 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 и другими браузерами, но запрос @media может покрыть это.

Ссылки


1
Работает хорошо для меня, по крайней мере, в хром: положение: абсолютный; клип: прямоугольный (2 пикселя, 85 пикселей, 128 пикселей, 2 пикселя); z-индекс: 2; отступ слева: 18 пикселей; отступ справа: 18px; поле: 7px авто; цвет: # 555; размер шрифта: наследовать; цвет фона: прозрачный;
BrianFreud

1
Я обнаружил, что обрезка стрелки только в половине работает в IE7, так как вы не можете контролировать границу выбора.
CpILL

1
Добавлена ​​функция щелчка как часть связанного вопроса
Paul Sweatte

1
@PaulSweatte, вау, это твой 20-й некромант ! Congrats. Вы также возглавили все мои запросы на золотой значок некроманта .
Немо

5

Очень хороший пример, который использует :afterи :beforeделает трюк в Styling Select Box with CSS3 | CSSDeck


1
Да, но данное требование должно быть совместимо с Internet Explorer 6,7 и 8
Jitendra Vyas

2
Да, он не совместим с IE, но я любил делиться тем, кто ищет современное решение, которое я искал.
Ахмад Аджми

5

Редактировать этот элемент не рекомендуется, но если вы хотите попробовать, он похож на любой другой элемент 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>

2
@MikkoP: при предложении изменений, пожалуйста, предоставьте более информативное резюме редактирования? «Улучшенное сообщение» не очень полезно в качестве краткого резюме для нас, рецензентов. Спасибо.
Жан-Франсуа Корбетт

1
@ Жан-Франсуа
Корбетт

1
Вы не можете
стилизовать

4
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;
}

Это использует цвет фона для выбранных элементов, и я удалил изображение ..


4

Да. Вы можете стилизовать любой элемент 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>

6
я не говорю об этом, я хочу изменить выпадающую стрелку на что-то другое
Jitendra Vyas

5
Вы не можете стилизовать стрелку выпадающего меню к другому изображению, это контролируется ОС. Если вам действительно нужно, лучше всего использовать раскрывающийся виджет DHTML.
Райан Доэрти

3
Вы можете изменять свойства CSS только через CSS. Вы можете изменить его поля, отступы, свойства шрифта, цвет фона и т. Д. Если вы хотите, чтобы он выглядел совершенно иначе, вы должны заменить его на графику во время выполнения с помощью JavaScript (что не является ужасным решением, если все сделано хорошо). ).
Дейв Уорд

4

Вот решение, основанное на моих любимых идеях из этого обсуждения. Это позволяет стилизовать элемент <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>

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 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;
}

CodePen

http://codepen.io/ralgh/pen/gpgbGx


3

Начиная с Internet Explorer 10, вы можете использовать ::-ms-expandселектор псевдоэлемента, чтобы стилизовать и скрыть элемент стрелки раскрывающегося списка.

select::-ms-expand {
    display:none;
    /* or visibility: hidden; to keep it's space/hitbox */
}

Остальные стили должны быть похожи на другие браузеры.

Вот базовый форк jsfiddle Данилда, который применяет поддержку IE10


3

Там простой способ.

Проверьте эту скрипку и простите меня за чрезмерный стиль: https://jsfiddle.net/dkellner/7ac9us70/

Хитрость позади: как только тег <select> получит свойство, называемое «size», он будет вести себя как список с фиксированной высотой и внезапно по какой-то причине позволит вам чертить его. Строго говоря, фиксированный список - это побочный эффект, но он просто помогает нам больше, потому что мы используем его для «выпадающего списка».

Минимальный пример:

<style>

    .stylish span   {position:relative;}
    .stylish select {position:absolute;left:0px;display:none}

</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="1">  Gandalf        </option>
            <option value="2">  Harry Potter   </option>
            <option value="3">  Jon Snow       </option>

            <!-- ... and so on -->

        </select>
    </span>
</div>

(для простоты я сделал это с помощью jQuery - но вы можете сделать то же самое без него)

Примечания стороны

  • Это решение дает вам больше, чем просто выбор: значение также можно редактировать вручную. Используйте свойство readonly, если вы предпочитаете способ ограничения выбора по умолчанию.

  • Чтобы максимизировать возможности стилизации, теги <optgroup> не находятся вокруг их дочерних элементов , они перемещены раньше ними. Это намеренно, визуально понятнее, и они счастливы работать так, не волнуйтесь.

  • Javascripts: да, я знаю, что OP сказал «нет Javascript», но я понял это, пожалуйста, не беспокойтесь о плагинах , и это нормально. Вам не нужны библиотеки для этого. Даже jQuery, как я уже сказал, это только для ясности примера.


2

Вы определенно должны сделать это, как в Styling select, optgroup и options с CSS . Во многих отношениях фоновый цвет и цвет - это как раз то, что вам обычно требуется для настройки параметров, а не весь выбор.


2

Вы также можете добавить стиль наведения в раскрывающемся списке.

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>


2

Третий метод в ответе Данилда может быть улучшен для работы с эффектами наведения и другими событиями мыши. Просто убедитесь, что элемент "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 просто получит обычный, не стилизованный выбор вместо стилизованного значка, который не обновляется правильно.


1
Я хотел бы знать причину любых отрицательных голосов, чтобы я мог знать, как улучшить! Ad
Адриан Шмидт

1

Решение только для 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;
}
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.