Как создать выпадающий список только с помощью CSS?

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

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

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

  • Internet Explorer 6,7 и 8
  • в Firefox
  • сафари

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

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

нашел подобные вопросы при переполнении стека.

и этот on Doctype.com.

1074
combobox cross-browser css html skinning

24 ответов

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

/* target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0) {
    select {
        background-image:none;
        padding: 5px;
    } 
}

все вместе:

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) {
    select {
        background:none;
        padding: 5px;
    }
}
<select>
  <option>Apples</option>
  <option selected>Pineapples</option>
  <option>Chocklate</option>
  <option>Pancakes</option>
</select>

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

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

решение #2 усечь элемент select, чтобы скрыть стрелку по умолчанию (демо)

(подробнее здесь)

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

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

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

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

enter image description here

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

.styled select {
  background: transparent;
  width: 150px;
  font-size: 16px;
  border: 1px solid #ccc;
  height: 34px;
}
.styled {
  margin: 50px;
  width: 120px;
  height: 34px;
  border: 1px solid #111;
  border-radius: 3px;
  overflow: hidden;
  background: url(http://www.stackoverflow.com/favicon.ico) 96% / 20% no-repeat #eee;
}
<div class="styled">
  <select>
    <option>Pineapples</option>
    <option selected>Apples</option>
    <option>Chocklate</option>
    <option>Pancakes</option>
  </select>
</div>

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

решение #3 - Используйте pointer-events собственность (демо)

(подробнее здесь)

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

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

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

однако с помощью этого метода можно использовать модернизатор или условные комментарии, чтобы 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) {
  .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]-->
842

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

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

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

219

элемент select и его раскрывающийся списокare трудно стиль.

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

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

58

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

Safari и Google Chrome fix:

select {
  -webkit-appearance: none;
}

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

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

39

<select> теги можно стилизовать с помощью CSS, как и любой другой HTML-элемент на HTML-странице, отображаемой в браузере. Ниже приведен (слишком простой) пример, который разместит элемент select на странице и отобразит текст опций синим цветом.

пример 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;
}
36

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

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

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>
17

в блоге как CSS форма выпадающего стиля нет JavaScript работает для меня, но не в Опера но:

select {
    border: 0 none;
    color: #FFFFFF;
    background: transparent;
    font-size: 20px;
    font-weight: bold;
    padding: 2px 10px;
    width: 378px;
    *width: 350px;
    *background: #58B14C;
}

#mainselection {
    overflow: hidden;
    width: 350px;
    -moz-border-radius: 9px 9px 9px 9px;
    -webkit-border-radius: 9px 9px 9px 9px;
    border-radius: 9px 9px 9px 9px;
    box-shadow: 1px 1px 11px #330033;
    background: url("arrow.gif") no-repeat scroll 319px 5px #58B14C;
}

<div id="mainselection">
    <select>
    <option>Select an Option</option>
    <option>Option 1</option>
    <option>Option 2</option>
    </select>
</div>
13

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

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

8

в современных браузерах относительно безболезненно стилизовать <select> в CSS. С appearance: none единственная сложная часть-замена стрелки (если это то, что вы хотите). Вот решение, которое использует inline 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).

8

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

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.

8

использовать clip свойство обрезать границы и Стрелку select элемент, затем добавьте свои собственные стили замены в оболочку:

    <!DOCTYPE html>
    <html>
      <head>
        <style>
          select { position: absolute; clip:rect(2px 49px 19px 2px); z-index:2; }
          body > span { display:block; position: relative; width: 64px; height: 21px; border: 2px solid green;  background: url(http://www.stackoverflow.com/favicon.ico) right 1px no-repeat; }
        </style>
      </head>
      <span>
        <select>
          <option value="">Alpha</option>
          <option value="">Beta</option>
          <option value="">Charlie</option>
        </select>
      </span>
    </html>

используйте второй выбор с нулевой непрозрачностью, чтобы сделать кнопку кликабельной:

    <!DOCTYPE html>
    <html>
      <head>
        <style>
          #real { position: absolute; clip:rect(2px 51px 19px 2px); z-index:2; }
          #fake { position: absolute; opacity: 0; }
    
          body > span { display:block; position: relative; width: 64px; height: 21px; background: url(http://www.stackoverflow.com/favicon.ico) right 1px no-repeat; }
        </style>
      </head>
      <span>
        <select id="real">
          <option value="">Alpha</option>
          <option value="">Beta</option>
          <option value="">Charlie</option>
        </select>
        <select id="fake">
          <option value="">Alpha</option>
          <option value="">Beta</option>
          <option value="">Charlie</option>
        </select>
      </span>
    </html>

координаты отличаются между Webkit и другими браузерами, но @media query может покрыть что.

ссылки

7

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

очень хороший пример, который использует :after и :before чтобы сделать трюк в стиль выберите поле с CSS3 / CSSDeck

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

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

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

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

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

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

вот основная вилка jsfiddle Danield, которая применяет поддержку IE10

3

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

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

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

существует способ стиль выберите теги.

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

Итак, вот минимальный пример, показывающий принцип:
(вам понадобится 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, чтобы избежать собственного "документа".parentNode.getElementsByTagName " безумие. Но это может сработать. Так что да, это родной выберите тег с собственным стилем и некоторыми обработчиками onclick. Это явно не"решение Javascript".

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

2

второй метод в ответе Данилда (https://stackoverflow.com/a/13968900/280972) можно улучшить для работы с hover-эффектами и другими событиями мыши. Просто убедитесь, что элемент"button" -появляется сразу после элемента select в разметке. Затем нацельте его с помощью + css-селектора:

HTML-код:

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

CSS:

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

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

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

1

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

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>
1

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

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

как предложил @Danield answer, я обертываю свой выбор в div (даже два divs для совместимости с 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. Также обратите внимание на дополнительный 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 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;
}
0