Есть ли CSS-способ для стилизации выпадающего списка <select>?

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

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

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

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

Ответы

Ответ 1

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

Решение № 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>

Ответ 2

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

Ответ 3

Элемент select и его раскрывающийся список сложны для стиля.

атрибуты стиля для выбранного элемента Chris Heilmann подтверждает, что Райан Дохери сказал в комментарии к первому ответу:

"Элемент select является частью операционной системы, а не браузера хром. Поэтому очень ненадежный стиль, и не обязательно иметь смысл попробовать в любом случае".

Ответ 4

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

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

select {
  -webkit-appearance: none;
}

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

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

Ответ 5

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

Ответ 6

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

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

Ответ 7

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

Ответ 8

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

Ответ 9

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

Ответ 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;}

Ответ 11

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

Ответ 12

Если стиль - важная проблема, использующая полностью настраиваемый виджет, может помочь, например, тот, который описан в сообщении в блоге Переопределение выпадающего списка с помощью CSS и jQuery.

Ответ 13

Используйте свойство 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>

Ответ 14

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

Ответ 15

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

Ответ 16

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

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

Ответ 17

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

Ответ 18

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

Ответ 19

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

Ответ 20

Как и в Internet Explorer 10, вы можете использовать ::-ms-expand селектор псевдоэлементов в стиле и скрыть элемент со стрелкой вниз.

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

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

Вот базовая вилка Danield jsfiddle, которая поддерживает поддержку IE10

Ответ 21

Там легкий путь.

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

Хитрость позади: как только тег & lt; 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, если вы предпочитаете способ ограничения выбора по умолчанию.
Чтобы максимизировать возможности стилизации, теги & lt; optgroup> не находятся вокруг их дочерних элементов, они перемещаются перед ними. Это преднамеренно, визуально понятнее, и они рады работать так, не волнуйтесь.
Javascripts: да, я знаю, что OP сказал "нет Javascript", но я понял это, пожалуйста, не беспокойтесь о плагинах, и это нормально. Вам не нужны никакие библиотеки для этого. Даже jQuery, как я уже сказал, это только для ясности примера.

Ответ 22

Очень хорошая альтернатива (чистый CSS) заключается в следующем:

Я нашел его на веб-сайте MDN. Он использует Fieldset, радио-кнопки и редактируемые поля ввода и метки для создания потрясающего редактируемого псевдо-выбора. Проверьте это:

https://mdn.mozillademos.org/files/4563/editable_select.html

Я знаю, что он напрямую не отвечает на ваш вопрос, но он по-прежнему стоит взгляда, поскольку вы можете стилизовать "другие" элементы и имитировать элемент управления select без написания кода JS.

Удачи!:)

Ответ 23

Решение только для CSS и HTML

Кажется, он совместим с Chrome, Firefox и Internet Explorer 11. Но, пожалуйста, оставьте свой отзыв о других веб-браузерах.

Как подсказывает ответ Danield, я заключаю свой выбор в 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 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;
}

Ответ 24

Третий метод в ответе Danield может быть улучшен для работы с эффектами наведения и другими событиями мыши. Просто убедитесь, что "кнопка" -element появляется сразу после элемента select в разметке. затем выберите целевой объект с помощью селектора + CSS:

HTML:

<select class="select-input">...</select>
<div class="select-button"></div>

CSS:

.select-input:hover+.select-button {
    <Hover styles here>
}

Это, однако, покажет эффект наведения при наведении курсора на любое место над -element, а не только на "кнопку".

Я использую этот метод в сочетании с Angular (поскольку мой проект в любом случае оказывается приложением Angular), чтобы покрыть весь выбор -element, и позволить Angular отображать текст выбранной опции в "кнопке" -element, В этом случае вполне разумно применять эффект наведения при наведении курсора на любое место над селектором.

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

Ответ 25

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

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>

Ответ 26

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

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

Ответы

Ответ 1

Все вместе:

Ответ 2

Ответ 3

Ответ 4

Ответ 5

Ответ 6

Ответ 7

Ответ 8

Ответ 9

Ответ 10

Ответ 11

Ответ 12

Ответ 13

Ответ 14

Ответ 15

Ответ 16

Ответ 17

Ответ 18

HTML

SCSS

CodePen

Ответ 19

Ответ 20

Ответ 21

Там легкий путь.

Дополнительные примечания

Ответ 22

Ответ 23

CSS

Ответ 24

HTML:

CSS:

Ответ 25

Ответ 26

Пользовательский выбор стилей CSS