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

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

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

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

  • Internet Explorer 6, 7 и 8
  • Firefox
  • Safari

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

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

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

И этот на Doctype.com.

mishka Mishka
1925
Редактировал вопрос 9-го февраля 2022 в 4:26
Peter Mortensen
Редактировал вопрос 7-го сентября 2019 в 7:15
Программирование
cross-browser html css combobox skinning
13-го декабря 2009 в 3:33
132 просмотров
Комментарии к вопросу (7)
Решение

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

Решение #1 - appearance: none - с Internet Explorer 10 - 11 workaround ([Demo][6])

--

Чтобы скрыть стрелку по умолчанию, установите 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][7]) - за исключением Internet Explorer 11 (и более поздних версий) и Firefox 34 (и более поздних версий).

Мы можем улучшить эту технику и добавить поддержку Internet Explorer 10 и Internet Explorer 11, добавив

select::-ms-expand {
    display: none; /* Hide the default arrow in Internet Explorer 10 and Internet Explorer 11 */
}

Если речь идет об Internet Explorer 9, у нас нет возможности удалить стрелку по умолчанию (что означает, что у нас теперь будет две стрелки), но мы можем использовать забавный селектор Internet Explorer 9.

Чтобы, по крайней мере, отменить нашу пользовательскую стрелку, оставив нетронутой стрелку выбора по умолчанию.

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

Все вместе:

select {
  margin: 50px;
  width: 150px;
  padding: 5px 35px 5px 5px;
  font-size: 16px;
  border: 1px solid #CCC;
  height: 34px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url(http://www.stackoverflow.com/favicon.ico) 96% / 15% no-repeat #EEE;
}

/* CAUTION: Internet Explorer hackery ahead */

select::-ms-expand {
    display: none; /* Remove default arrow in Internet Explorer 10 and 11 */
}

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

<select>
  Apples
  Pineapples
  Chocklate
  Pancakes
mishka Mishka
1925
Редактировал ответ 9-го февраля 2022 в 4:26
Комментарии (14)

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

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

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

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

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

mishka Mishka
1925
Редактировал ответ 9-го февраля 2022 в 4:26
Комментарии (8)

Элемент select и его выпадающий элемент *сложны для стилизации.

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

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

mishka Mishka
1925
Редактировал ответ 9-го февраля 2022 в 4:26
Комментарии (0)

Наибольшее несоответствие я'вэ заметил, когда стиль выберите меню составляет сафари и Гугл Хром рендеринг (Firefox является полностью настраиваемый через CSS). После некоторых поисков через неясных глубинах Интернета я наткнулся на такую, которая почти полностью устраняет мои опасения с webkit:

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

select {
  -webkit-appearance: none;
}

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

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

Комментарии (3)

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

Пример HTML-файла (selectExample.html):





  Select Styling



<select id="styledSelect" class="blueText">
  Apple
  Orange
  Cherry
Комментарии (3)

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

Он использует многослойный повернут фоновых слоев для «вырезать» в стрелку, как псевдо-элементы не't работа для выберите элемент.

Редактировать: в этой обновленной версии я использую переменные CSS и крошечная система тематизации.

в

в :корень { --радиус: 2 пикселя; --baseFg: dimgray; --baseBg: белый; --accentFg: #006fc2; --accentBg: bae1ff#; }

.theme-pink {
  --radius: 2em;
  --baseFg: #c70062;
  --baseBg: #ffe3f1;
  --accentFg: #c70062;
  --accentBg: #ffaad4;
}

.theme-construction {
  --radius: 0;
  --baseFg: white;
  --baseBg: black;
  --accentFg: black;
  --accentBg: orange;
}

select {
  font: 400 12px/1.3 sans-serif;
  -webkit-appearance: none;
  appearance: none;
  color: var(--baseFg);
  border: 1px solid var(--baseFg);
  line-height: 1;
  outline: 0;
  padding: 0.65em 2.5em 0.55em 0.75em;
  border-radius: var(--radius);
  background-color: var(--baseBg);
  background-image: linear-gradient(var(--baseFg), var(--baseFg)),
    linear-gradient(-135deg, transparent 50%, var(--accentBg) 50%),
    linear-gradient(-225deg, transparent 50%, var(--accentBg) 50%),
    linear-gradient(var(--accentBg) 42%, var(--accentFg) 42%);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 1px 100%, 20px 22px, 20px 22px, 20px 100%;
  background-position: right 20px center, right bottom, right bottom, right bottom;   
}

select:hover {
  background-image: linear-gradient(var(--accentFg), var(--accentFg)),
    linear-gradient(-135deg, transparent 50%, var(--accentFg) 50%),
    linear-gradient(-225deg, transparent 50%, var(--accentFg) 50%),
    linear-gradient(var(--accentFg) 42%, var(--accentBg) 42%);
}

select:active {
  background-image: linear-gradient(var(--accentFg), var(--accentFg)),
    linear-gradient(-135deg, transparent 50%, var(--accentFg) 50%),
    linear-gradient(-225deg, transparent 50%, var(--accentFg) 50%),
    linear-gradient(var(--accentFg) 42%, var(--accentBg) 42%);
  color: var(--accentBg);
  border-color: var(--accentFg);
  background-color: var(--accentFg);
}

<select>
  So many options
  ...

  So many options
  ...

  So many options
  ...
Комментарии (2)

Вот версия, которая работает во всех современных браузерах. Ключ находится через внешний вид:никто`, которая удаляет форматирование по умолчанию. Поскольку все форматирование пропало, вам нужно добавить обратно в стрелку, которая визуально отличает выберите из входного сигнала.

Рабочий пример: 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 1
    Option 2
Комментарии (0)

Запись в блоге [как форма CSS выпадающего стиль нет JavaScript][1] работает для меня, но это не в [Опера][2] хотя:

в 

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>
    Select an Option
    Option 1
    Option 2
Комментарии (0)

У меня в вашем случае с помощью [загрузки][1]. Это самое простое решение, которое работает:

в 

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=");
}


<section class="container">

    <select class="form-control">
      One
      Two
Комментарии (0)

В современных браузерах это'ы относительно безболезненно стиль в <выбрать> в CSS. С внешний вид: нет Единственный нюанс состоит в замене стрелки (если что's то, что вы хотите). Здесь'ы решение, которое использует данные встроенного: Ури с обычным текстом в 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'> \
       \
    </svg>");
}

<select>
  Option 1
  Option 2

  Option 1
  Option 2
Комментарии (1)
 
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;}
Комментарии (1)

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

в 






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


      <span>
        <select>
          Alpha
          Beta
          Charlie
Комментарии (4)

Редактировать этот элемент не рекомендуется, но если вы хотите попробовать это's, как любой другой 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>
    Something #1
    Something #2
    Something #3
Комментарии (3)

Да. Вы можете стилизовать любой элемент HTML по имени его тега, например, так:

select {
  font-weight: bold;
}

Конечно, вы также можете использовать CSS-класс, чтобы придать ему стиль, как и любому другому элементу:


<select class="important">
  Important Option
  Another Important Option
Комментарии (3)

Очень хороший пример, который использует после и перед, Чтобы сделать трюк в стайлинга выбрать окна с помощью CSS3 | CSSDeck

Комментарии (2)
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;
}

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

Комментарии (0)

Здесь'ы решение, основанное на моих любимых идей из этой дискуссии. Это позволяет в стиле &ЛТ;выберите> элемент напрямую, без дополнительной разметки.

Он работает интернет&ампер;усилитель; nbsp;Обозреватель&ампер;усилитель; nbsp;10 (и выше) с резервом для Internet&ампер;усилитель; nbsp;Обозреватель&ампер;усилитель; nbsp;8/9. Один нюанс для этих браузеров заключается в том, что фоновое изображение должно располагаться и быть достаточно мал, чтобы спрятаться за родной расширить контроль.

HTML-код


<select name='options'>
  Option 1
  Option 2
  Option 3
Peter Mortensen
Редактировал ответ 7-го сентября 2019 в 8:16
Комментарии (0)

Как в Интернет Эксплорер 10, вы можете использовать клавишу ::-МС-расширить псевдо селектор, элемент стиля, и скрывать, раскрывающийся элемент стрелки. 

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

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

[Здесь основной развилке Danield'с jsfiddle, что касается поддержки для IE10][2]

Комментарии (0)

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

Проверить эту скрипку, и да простят меня overstyling: https://jsfiddle.net/dkellner/7ac9us70/

Секрет: как только &ЛТ;выберите> тег получает свойство называется "размер", он будет вести себя как с фиксированной высотой списке, и, вдруг, по какой-то причине, позволяет стиль, черт побери. Сейчас, строго говоря, фиксированный список-это побочный эффект - но это только помогает нам больше, потому что мы используем его в "упал-вниз посмотри на".

Минимальный пример:<БР>




    .stylish span   {position:relative;}
    .stylish select {position:absolute;left:0px;display:none}


...
<div class="stylish">
     Choose your superhero: 
    <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());">


              Gandalf        
              Harry Potter   
              Jon Snow
dkellner
Редактировал ответ 7-го октября 2019 в 9:01
Комментарии (0)

Выберите стили CSS

Испытана в интернет&ампер;усилитель; nbsp;проводник (10 и 11), край, Firefox и Chrome

в 

select::-ms-expand {
  display: none;
}
select {
  display: inline-block;
  box-sizing: border-box;
  padding: 0.5em 2em 0.5em 0.5em;
  border: 1px solid #eee;
  font: inherit;
  line-height: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  background-repeat: no-repeat;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 15px top 1em, right 10px top 1em;
  background-size: 5px 5px, 5px 5px;
}

<select name="">
  Lorem
  Lorem Ipsum

  Disabled

  Color!
  Lorem Ipsum
Peter Mortensen
Редактировал ответ 7-го сентября 2019 в 8:21
Комментарии (0)