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

1113

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

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

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

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

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

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

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

И это на Doctype.com.

  • 1
    ничего особенного в гугле не найдено, только решение js есть
  • 32
    Я чувствую, что это законный вопрос, но ответ «нет, не совсем» или «не так, как вы этого хотите». Но никто (ни я) не уверен на 100% в этом, это чувство двусмысленности заползает под кожу читателя, и законность вопроса ставится под сомнение.
Показать ещё 5 комментариев
Теги:
combobox
cross-browser
skinning

25 ответов

835
Лучший ответ

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

Решение № 1 - внешний вид: нет - с обходным путем ie10-11 (Демо)

Чтобы скрыть набор стрелок по умолчанию appearance: none в элементе select, добавьте свою собственную стрелку с помощью background-image

select {
   -webkit-appearance: none; 
   -moz-appearance: none;
   appearance: none;       /* remove default arrow */
   background-image: url(...);   /* add custom arrow */
}

Поддержка браузера:

appearance: none имеет очень хорошую поддержку браузера (caniuse) - за исключением ie11- и firefox 34 -

Мы можем улучшить эту технику и добавить поддержку для ie10 и ie11, добавив

select::-ms-expand { 
    display: none; /* hide the default arrow in ie10 and ie11 */
}

Если ie9 вызывает беспокойство - у нас нет способа удалить стрелку по умолчанию (что означало бы, что у нас теперь будут две стрелки), но мы могли бы использовать фанки ie9 selector по крайней мере, отменить нашу специальную стрелку - оставив стрелку выбора по умолчанию неповрежденной.

/* 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: IE hackery ahead */


select::-ms-expand { 
    display: none; /* remove default arrow in IE 10 and 11 */
}

/* target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
    select {
        background:none\9;
        padding: 5px\9;
    }
}
<select>
  <option>Apples</option>
  <option selected>Pineapples</option>
  <option>Chocklate</option>
  <option>Pancakes</option>
</select>

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

Если требуется поддержка браузера для ie9- и firefox 34, продолжайте читать...

Решение № 2 Усечь элемент выбора, чтобы скрыть стрелку по умолчанию (Демо)

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

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

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

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

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

Изображение 2600

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

.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 - но вам не нужно поддерживать старые версии IE - тогда продолжайте читать...

Решение №3 - Используйте свойство pointer-events (Демо)

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

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

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

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

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

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

.notIE {
  position: relative;
  display: inline-block;
}
select {
  display: inline-block;
  height: 30px;
  width: 150px;
  outline: none;
  color: #74646e;
  border: 1px solid #C8BFC4;
  border-radius: 4px;
  box-shadow: inset 1px 1px 2px #ddd8dc;
  background: #fff;
}
/* Select arrow styling */

.notIE .fancyArrow {
  width: 23px;
  height: 28px;
  position: absolute;
  display: inline-block;
  top: 1px;
  right: 3px;
  background: url(http://www.stackoverflow.com/favicon.ico) right / 90% no-repeat #fff;
  pointer-events: none;
}
/*target Internet Explorer 9 and Internet Explorer 10:*/

@media screen and (min-width: 0\0) {
  .notIE .fancyArrow {
    display: none;
  }
}
<!--[if !IE]> -->
<div class="notIE">
  <!-- <![endif]-->
  <span class="fancyArrow"></span>
  <select>
    <option>Apples</option>
    <option selected>Pineapples</option>
    <option>Chocklate</option>
    <option>Pancakes</option>
  </select>
  <!--[if !IE]> -->
</div>
<!-- <![endif]-->
Поделиться
  • 1
    Какой из этих двух способов лучше всего подходит вам?
  • 3
    Это зависит от требований к дизайну. Если вы согласны с выпадающим выпадающим списком - тогда это лучше, потому что это кросс-браузер (все браузеры IMO + IE8 + можно считать кросс-браузерными), но я думаю, что многим - это не подойдет. Так что на самом деле в моем утверждении выше я имел в виду, что aprroach # 2 был лучшим.
Показать ещё 14 комментариев
209

Возможно, но, к сожалению, в основном в браузерах на основе Webkit, насколько мы, как разработчики, требуем. Ниже приведен пример стилизации CSS, собранного с панели параметров Chrome, с помощью встроенного инспектора инструментов разработчика, улучшенного для соответствия поддерживаемым в настоящее время свойствам CSS в большинстве современных браузеров:

select {
    -webkit-appearance: button;
    -moz-appearance: button;
    -webkit-user-select: none;
    -moz-user-select: none;
    -webkit-padding-end: 20px;
    -moz-padding-end: 20px;
    -webkit-padding-start: 2px;
    -moz-padding-start: 2px;
    background-color: #F07575; /* fallback color if gradients are not supported */
    background-image: url(../images/select-arrow.png), -webkit-linear-gradient(top, #E5E5E5, #F4F4F4); /* For Chrome and Safari */
    background-image: url(../images/select-arrow.png), -moz-linear-gradient(top, #E5E5E5, #F4F4F4); /* For old Fx (3.6 to 15) */
    background-image: url(../images/select-arrow.png), -ms-linear-gradient(top, #E5E5E5, #F4F4F4); /* For pre-releases of IE 10*/
    background-image: url(../images/select-arrow.png), -o-linear-gradient(top, #E5E5E5, #F4F4F4); /* For old Opera (11.1 to 12.0) */ 
    background-image: url(../images/select-arrow.png), linear-gradient(to bottom, #E5E5E5, #F4F4F4); /* Standard syntax; must be last */
    background-position: center right;
    background-repeat: no-repeat;
    border: 1px solid #AAA;
    border-radius: 2px;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
    color: #555;
    font-size: inherit;
    margin: 0;
    overflow: hidden;
    padding-top: 2px;
    padding-bottom: 2px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Когда вы запустите этот код на любой странице в браузере на основе Webkit, он должен изменить внешний вид окна выбора, удалить стандартную стрелку OS и добавить PNG-стрелку, поставить несколько интервалов до и после метки, почти что угодно вы хотите.

Наиболее важной частью является свойство appearance, которое изменяет поведение элемента.

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

Поделиться
  • 3
    Привет, я заметил, что блоки выбора начали выглядеть совсем по-другому, начиная с Firefox 12 (он выглядит много как Chrome (у меня Mac)), и кажется, что FF 12 поддерживает гораздо больше атрибутов внешнего вида.
  • 0
    @matthew Morek - это не работает в Firefox
Показать ещё 6 комментариев
56

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

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

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

Поделиться
37

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

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

select {
  -webkit-appearance: none;
}

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

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

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

<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;
}
Поделиться
  • 29
    Удивительно, но в первый раз я увидела «матерей», вовлеченных в Интернет, но не грубых. +1 за это!
  • 29
    Этот ответ не решает этот вопрос. Это только стили выбора ввода, но не раскрывающийся
Показать ещё 1 комментарий
15

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

Он использует слоированные вращающиеся фоновые слои для "вырезания" стрелки раскрывающегося списка, поскольку псевдоэлементы не будут работать для элемента select. Замените "hotpink" своим любимым цветом - я использую переменную.

select {
  font: 400 12px/1.3 "Helvetica Neue", sans-serif;
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid hotpink;
  line-height: 1;
  outline: 0;
  color: hotpink;
  border-color: hotpink;
  padding: 0.65em 2.5em 0.55em 0.75em;
  border-radius: 3px;
  background: linear-gradient(hotpink, hotpink) no-repeat,
              linear-gradient(-135deg, rgba(255,255,255,0) 50%, white 50%) no-repeat,
              linear-gradient(-225deg, rgba(255,255,255,0) 50%, white 50%) no-repeat,
              linear-gradient(hotpink, hotpink) no-repeat;
  background-color: white;
  background-size: 1px 100%, 20px 20px, 20px 20px, 20px 60%;
  background-position: right 20px center, right bottom, right bottom, right bottom;   
}
<select>
    <option>So many options</option>
    <option>...</option>
</select>
Поделиться
  • 2
    Вау, это одно из самых крутых решений, которое я видел. Это работает для меня в последних версиях Chrome и Safari на Mac. Как насчет других браузеров?
  • 0
    У меня работает в Firefox с добавлением -moz-appearance: none;
13

Сообщение в блоге Как стирать 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>
Поделиться
10

Вот версия, которая работает во всех современных браузерах. Ключ использует 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>
Поделиться
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;}
Поделиться
  • 0
    Ничего не могу выбрать с этим с текущим Chrome.
8

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

Поделиться
  • 1
    хорошая ссылка. Это было в значительной степени то, что я искал. Не идеально, но достаточно хорошо.
7

Я получил ваше дело, используя Bootstrap. Это самое простое решение, которое работает:

select.form-control {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearancce: 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.

Поделиться
6

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

Поделиться
6

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

Ссылки

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

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

Поделиться
  • 0
    Да, но данное требование должно быть совместимо с Internet Explorer 6,7 и 8
  • 1
    Да, он не совместим с IE, но я любил делиться тем, кто ищет современное решение, которое я искал.
4

Редактировать этот элемент не рекомендуется, но если вы хотите попробовать его, как и любой другой элемент 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>
Поделиться
  • 0
    @MikkoP: при предложении изменений, пожалуйста, предоставьте более информативное резюме редактирования? «Улучшенное сообщение» не очень полезно в качестве краткого резюме для нас, рецензентов. Благодарю.
  • 0
    @ Жан-Франсуа Корбетт Я постараюсь быть более конкретным :)
Показать ещё 1 комментарий
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>
Поделиться
  • 5
    я не говорю об этом, я хочу изменить стрелку раскрывающегося списка на что-то другое
  • 5
    Вы не можете стилизовать стрелку выпадающего меню к другому изображению, это контролируется ОС. Если вам действительно нужно, лучше всего использовать выпадающий виджет DHTML.
Показать ещё 1 комментарий
3

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

Работает с IE10 + с надежной защитой для IE8/9. Одно из предостережений для этих браузеров заключается в том, что фоновое изображение должно располагаться и быть достаточно маленьким, чтобы скрываться за встроенным элементом управления расширением.

HTML

<select name='options'>
  <option value='option-1'>Option 1</option>
  <option value='option-2'>Option 2</option>
  <option value='option-3'>Option 3</option>
</select>

SCSS

body {
  padding: 4em 40%;
  text-align: center;
}

select {
  $bg-color: lightcyan;
  $text-color: black;
  appearance: none; // using -prefix-free http://leaverou.github.io/prefixfree/
  background: {
    color: $bg-color;
    image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1255/caret--down-15.png");
    position: right;
    repeat: no-repeat;
  }
  border: {
    color: mix($bg-color, black, 80%);
    radius: .2em;
    style: solid;
    width: 1px;
    right-color: mix($bg-color, black, 60%);
    bottom-color: mix($bg-color, black, 60%);
  }
  color: $text-color;
  padding: .33em .5em;
  width: 100%;
}

// Removes default arrow for IE10+
// IE 8/9 get dafault arrow which covers caret image
// as long as caret image is small than and positioned
// behind default arrow
select::-ms-expand {
    display: none;
}

Codepen

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

Поделиться
3

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

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

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

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

Поделиться
3 
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;
}

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

Поделиться
3

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

Поделиться
2

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

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

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

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

Удачи!:)

Поделиться
0

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

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>
Поделиться
0

Существует способ создания тегов SELECT.

Если в теге есть параметр "размер", применяется практически любой CSS. Используя этот трюк, я создал скрипку, практически эквивалентную обычным тегам select, плюс значение можно редактировать вручную, как ComboBox на визуальных языках (если только вы не вставляете readonly во входной тег).

Итак, вот минимальный пример, чтобы увидеть принцип:
(вам понадобится jQuery для механизма щелчка):

<style>

    /* only these 2 lines are truly required */
    .stylish span {position:relative;}
    .stylish select {position:absolute;left:0px;display:none}

    /* now you can style the hell out of them */
    .stylish input    { ... }
    .stylish select   { ... }
    .stylish option   { ... }
    .stylish optgroup { ... }

</style>
...
<div class="stylish">
    <label> Choose your superhero: </label>
    <span>
        <input onclick="$(this).closest('div').find('select').slideToggle(110)">
        <br>
        <select size=15 onclick="$(this).hide().closest('div').find('input').val($(this).find('option:selected').text());">

            <optgroup label="Fantasy"></optgroup>
            <option value="gandalf">Gandalf</option>
            <option value="harry">Harry Potter</option>
            <option value="jon">Jon Snow</option>

            <optgroup label="Comics"></optgroup>
            <option value="tony">Tony Stark</option>
            <option value="steve">Steven Rogers</option>
            <option value="natasha">Natasha Romanova</option>

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

Здесь скрипка с несколькими стилями: https://jsfiddle.net/dkellner/7ac9us70/

(Это излишне, конечно, просто для демонстрации возможностей.)

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

Прежде чем кто-нибудь отметит часть NO-JS: Я знаю, что в вопросе говорилось "нет Javascript". Для меня это больше похоже на то, что не надо с плагинами, я знаю, что они могут это сделать, но мне нужен родной путь. Понятно, никаких плагинов, кроме дополнительных скриптов, только то, что помещается внутри тега "onclick". Единственная зависимость - это jQuery, чтобы избежать безумства "document.parentNode.getElementsByTagName". Но это может сработать. Так что да, это родной тег select с родным стилем и некоторыми обработчиками onclick. Это явно не "решение Javascript".

Наслаждайтесь!

Поделиться
0

Второй метод в ответе Danield (https://stackoverflow.com/questions/1895476/how-to-style-a-select-dropdown-with-only-css) может быть улучшен для работы с эффектами зависания и другими событиями мыши. Просто убедитесь, что элемент "button" появился сразу после элемента select в разметке. Затем настройте его с помощью + css-селектора:

HTML:

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

CSS

.select-input:hover+.select-button {
    [hover styles here]
}

Это, однако, покажет эффект наведения при наведении указателя на любой элемент над элементом select, а не только на "button".

Я использую этот метод в сочетании с Angular (так как мой проект оказывается Angular -app в любом случае), чтобы охватить весь элемент select, и пусть Angular отображает текст выбранного в элементе "button". В этом случае имеет смысл, что эффект зависания применяется при падении в любом месте над выбором. Однако он не работает без javascript, поэтому, если вы хотите это сделать, и ваш сайт должен работать без javascript, вы должны убедиться, что ваш script добавляет элементы и классы, необходимые для улучшения. Таким образом, браузер без javascript просто получит обычный, неистребимый, выберите, а не стилизованный значок, который не будет корректно обновляться.

Поделиться
0

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

Я считаю совместимым с Chrome, Firefox и IE11. Но, пожалуйста, оставьте отзыв о других веб-браузерах.

Как было предложено ответом @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>

Обратите внимание на 2 обертки. Также обратите внимание на добавление дополнительного 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 hidding the default-provided browser arrow */
    padding-left: 13px;
    margin-left: 0;
    border: none;
    background: none;
    /* margin-top & margin-bottom must be set since some browser have default values for select elements */
    margin-bottom: 1px;
    margin-top: 1px;
}
select:focus {
    outline: none; /* removing default browsers outline on focus */
}
.search-select-arrow-down {
    position: absolute;
    height:10px;
    width: 12px;
    background: url(http://i.imgur.com/pHIYN06.png) scroll no-repeat 2px 0px;
    left: 1px;
    top: 5px;
}
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню