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

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

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

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

Я знаю, что могу сделать это с помощью 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имеет очень хорошую поддержку браузера ( 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;
    }
}

Все вместе:

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 , а затем, 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.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 вернулся к стандартному встроенному стрелке.

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

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

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

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

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

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

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

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

Самое большое несоответствие, которое я заметил при стилизации выпадающих списков, - это 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;
}

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

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

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

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

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

Используйте 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 может покрыть это.

Ссылки

• Тесты Dojo FX: dojox.fx.ext-dojo.complex
• Маскировка CSS: проверка свойства клипа с помощью функции rect и автоматическое изменение значений в рамке

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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>

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

Решение только для 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;
}