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

Question

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

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

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

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

Internet Explorer 6,7 и 8
Firefox
Safari

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

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

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

и этот on Doctype.com.

24 1074

html css cross-browser combobox skinning

24 ответа:

это возможно, но, к сожалению, в основном в браузерах на основе 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, кажется.

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

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

select.form-control {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-position: right center;
    background-repeat: no-repeat;
    background-size: 1ex;
    background-origin: content-box;
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICBpZD0ic3ZnMiIKICAgdmlld0JveD0iMCAwIDM1Ljk3MDk4MyAyMy4wOTE1MTgiCiAgIGhlaWdodD0iNi41MTY5Mzk2bW0iCiAgIHdpZHRoPSIxMC4xNTE4MTFtbSI+CiAgPGRlZnMKICAgICBpZD0iZGVmczQiIC8+CiAgPG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhNyI+CiAgICA8cmRmOlJERj4KICAgICAgPGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPgogICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PgogICAgICAgIDxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4KICAgICAgICA8ZGM6dGl0bGU+PC9kYzp0aXRsZT4KICAgICAgPC9jYzpXb3JrPgogICAgPC9yZGY6UkRGPgogIDwvbWV0YWRhdGE+CiAgPGcKICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjAyLjAxNDUxLC00MDcuMTIyMjUpIgogICAgIGlkPSJsYXllcjEiPgogICAgPHRleHQKICAgICAgIGlkPSJ0ZXh0MzMzNiIKICAgICAgIHk9IjYyOS41MDUwNyIKICAgICAgIHg9IjI5MS40Mjg1NiIKICAgICAgIHN0eWxlPSJmb250LXN0eWxlOm5vcm1hbDtmb250LXdlaWdodDpub3JtYWw7Zm9udC1zaXplOjQwcHg7bGluZS1oZWlnaHQ6MTI1JTtmb250LWZhbWlseTpzYW5zLXNlcmlmO2xldHRlci1zcGFjaW5nOjBweDt3b3JkLXNwYWNpbmc6MHB4O2ZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZTtzdHJva2Utd2lkdGg6MXB4O3N0cm9rZS1saW5lY2FwOmJ1dHQ7c3Ryb2tlLWxpbmVqb2luOm1pdGVyO3N0cm9rZS1vcGFjaXR5OjEiCiAgICAgICB4bWw6c3BhY2U9InByZXNlcnZlIj48dHNwYW4KICAgICAgICAgeT0iNjI5LjUwNTA3IgogICAgICAgICB4PSIyOTEuNDI4NTYiCiAgICAgICAgIGlkPSJ0c3BhbjMzMzgiPjwvdHNwYW4+PC90ZXh0PgogICAgPGcKICAgICAgIGlkPSJ0ZXh0MzM0MCIKICAgICAgIHN0eWxlPSJmb250LXN0eWxlOm5vcm1hbDtmb250LXZhcmlhbnQ6bm9ybWFsO2ZvbnQtd2VpZ2h0Om5vcm1hbDtmb250LXN0cmV0Y2g6bm9ybWFsO2ZvbnQtc2l6ZTo0MHB4O2xpbmUtaGVpZ2h0OjEyNSU7Zm9udC1mYW1pbHk6Rm9udEF3ZXNvbWU7LWlua3NjYXBlLWZvbnQtc3BlY2lmaWNhdGlvbjpGb250QXdlc29tZTtsZXR0ZXItc3BhY2luZzowcHg7d29yZC1zcGFjaW5nOjBweDtmaWxsOiMwMDAwMDA7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmU7c3Ryb2tlLXdpZHRoOjFweDtzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1saW5lam9pbjptaXRlcjtzdHJva2Utb3BhY2l0eToxIj4KICAgICAgPHBhdGgKICAgICAgICAgaWQ9InBhdGgzMzQ1IgogICAgICAgICBzdHlsZT0iZmlsbDojMzMzMzMzO2ZpbGwtb3BhY2l0eToxIgogICAgICAgICBkPSJtIDIzNy41NjY5Niw0MTMuMjU1MDcgYyAwLjU1ODA0LC0wLjU1ODA0IDAuNTU4MDQsLTEuNDczMjIgMCwtMi4wMzEyNSBsIC0zLjcwNTM1LC0zLjY4MzA0IGMgLTAuNTU4MDQsLTAuNTU4MDQgLTEuNDUwOSwtMC41NTgwNCAtMi4wMDg5MywwIEwgMjIwLDQxOS4zOTM0NiAyMDguMTQ3MzIsNDA3LjU0MDc4IGMgLTAuNTU4MDMsLTAuNTU4MDQgLTEuNDUwODksLTAuNTU4MDQgLTIuMDA4OTMsMCBsIC0zLjcwNTM1LDMuNjgzMDQgYyAtMC41NTgwNCwwLjU1ODAzIC0wLjU1ODA0LDEuNDczMjEgMCwyLjAzMTI1IGwgMTYuNTYyNSwxNi41NDAxNyBjIDAuNTU4MDMsMC41NTgwNCAxLjQ1MDg5LDAuNTU4MDQgMi4wMDg5MiwwIGwgMTYuNTYyNSwtMTYuNTQwMTcgeiIgLz4KICAgIDwvZz4KICA8L2c+Cjwvc3ZnPgo=");
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<section class="container">
  <form class="form-horizontal">
    <select class="form-control">
      <option>One</option>
      <option>Two</option>
    </select>
  </form>
</section>

Примечание: base64 материал fa-chevron-down в SVG.

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 и другими браузерами, но a @ media query может покрыть что.

ссылки

Dojo FX тесты: dojox.Форекс.ext-dojo.комплекс

CSS маскировка: Проверьте свойство клипа с функцией rect и автоматическими значениями clip to border box

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

есть способ стилизовать выбор тегов.

Если есть параметр "размер" в теге, почти любой 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-эффектами и другими событиями мыши. Просто убедитесь, что кнопка ""-элемент приходит сразу после выбора элемента в разметке. Затем направьте его с помощью + 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-element и позволить Angular отображать текст выбранной опции в элементе "кнопка". В этом случае имеет смысл, что эффект наведения применяется при наведении в любом месте над select. Однако он не работает без javascript, поэтому, если вы хотите это сделать, и ваш сайт должен работать без javascript, вы должны убедиться что ваш скрипт добавляет элементы и классы, необходимые для повышения. Таким образом, браузер без javascript будет просто получить нормальный, unstyled, выберите, вместо стилизованного значка, который не обновляется правильно.

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

Danield · Accepted Answer · 2018-02-20 18:22:39

вот 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.

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

[однако следует отметить, что если пользовательский элемент 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 собственность (Demo)

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

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

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

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

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

NB: Будучи, что Internet Explorer 10 не поддерживает conditional comments больше: если вы хотите использовать этот подход, вы должны, вероятно, использовать Modernizr. Тем не менее, по-прежнему можно исключить указатель-события CSS из Internet Explorer 10 с помощью CSS hack описал здесь.
.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;
  }
}

<div class="notIE">
  
  <span class="fancyArrow"></span>
  <select>
    <option>Apples</option>
    <option selected>Pineapples</option>
    <option>Chocklate</option>
    <option>Pancakes</option>
  </select>
  
</div>

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

24 ответа:

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

все вместе:

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

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

HTML

SCSS

Codepen

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