Как удалить значок стрелки по умолчанию из раскрывающегося списка (выбрать элемент)?


297

Я хочу удалить стрелку раскрывающегося списка из HTML- <select>элемента. Например:

<select style="width:30px;-webkit-appearance: none;">
    <option>2000</option>
    <option>2001</option>
    <option>2002</option>
    ...
</select>

Как это сделать в Opera, Firefox и Internet Explorer?

введите описание изображения здесь


Некоторые ответы / хаки для того, чтобы скрыть это в Firefox - stackoverflow.com/questions/5912791/…
andyb

2
внешний вид #slectType { -webkit-appearance: none; appearance: none /*menulist*/ ! важные; max-width: 300px; line-height: 0px;} input[type='text'], select {max-height: 30px;max-width: 300px; text-align-last: center; /*text-indent: 5px;*/} button:hover {color: #FFF;background-color: #566977;box-shadow:none;border-color: #759AB5;} #errorMSG{z-index: 2147483647;} просмотры [CH: -webkit, FF: -moz, IE: -ms, Oprea: -o];
Яша

1
Возможный дубликат стрелки
Muath,

Ответы:


383

Там нет необходимости для взлома или переполнения. Есть псевдоэлемент для стрелки раскрывающегося списка в IE:

select::-ms-expand {
    display: none;
}

22
потому что вопрос был, как убрать стрелку выпадающего в IE. IE9 не имеет этой функциональности, но работает в IE10. поэтому, если вы не используете Windows XP, вы все равно должны использовать IE10. IE11 почти вышел. Другой вариант - уродливый CSS-хак, чтобы скрыть фактическую кнопку выпадающего меню и создать свою собственную.
nrutas

2
ссылка вот уродливый хак, чтобы скрыть переполнение
nrutas

1
Работает в IE11. Gracias!
ConorLuddy

Это не сработало в Firefox. Используйте решение Варуна Ратора ниже для Firefox.
Почти Питт

1
это только для IE. конечно, это не будет работать в Firefox.
nrutas

289

Ранее упомянутые решения хорошо работают с Chrome, но не с Firefox.

Я нашел решение, которое хорошо работает как в Chrome, так и в Firefox (не в IE). Добавьте следующие атрибуты в CSS для вашего элемента SELECT и отрегулируйте верхний край в соответствии с вашими потребностями.

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
}

Надеюсь это поможет :)


9
Этот трюк перестал работать на Firefox начиная с версии 31 (в сборке Nightly по состоянию на май 2014 года). Посмотрим, что можно сделать за это время. Эта суть, которую я написал, полностью описана ниже
Жоао Кунья,

Метод Джоао Кунья проверен и успешно использован. Когда вы проверите это, не забудьте открыть ссылку в Firefox!
NoobishPro

Это сработало для меня. Я хотел использовать его для wkhtmltopdf для генерации PDF из HTML. Спасибо
Фейсал

187

Простой способ убрать стрелку выпадающего списка

select {
  /* for Firefox */
  -moz-appearance: none;
  /* for Chrome */
  -webkit-appearance: none;
}

/* For IE10 */
select::-ms-expand {
  display: none;
}
<select>
  <option>2000</option>
  <option>2001</option>
  <option>2002</option>
</select>


4
Я только что использовал appearance: noneдля Chrome и Firefox Quantum (v59 и выше). Т.е. префиксы поставщиков больше не нужны .
CPHPython

2
@CPHPython Большинство браузеров на данный момент все еще имеют тег «частичная поддержка с префиксом» ...
Дан,

2
@CPHPython вам нужно установить Autoprefixer в вашем проекте для работы без префикса appearance: none. Большинству браузеров все еще нужны префиксы.
Даниэль Тонон

@DanielTonon О, возможно, я использовал такой пакет postcss, как этот. Я точно не помню, но я думаю, что проверил инспектор браузера, прежде чем комментировать.
CPHPython

58

Попробуй это :

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 2px 30px 2px 2px;
    border: none;
}

JS Bin: http://jsbin.com/aniyu4/2/edit

Если вы используете Internet Explorer:

select {
    overflow:hidden;
    width: 120%;
}

Или вы можете использовать Choosen: http://harvesthq.github.io/chosen/


1
Вы тестировали свой JSBin в IE и Firefox? Я все еще вижу встроенную стрелку раскрывающегося списка в обоих.
Мартин Смит

Проверьте с Choosen, я думаю, что это лучший выбор.
EpokK

«Если вы используете Internet Explorer»? Вы должны учитывать большой процент населения, который действительно использует IE и обслуживает их независимо от того
Дэнни Махони

Статистика пользователей наших сайтов выглядит следующим образом: 5,21% IE или 2,37% Edge
nu everest

«Если вы используете IE» было бы правильно, было бы лучше сказать «Если вам нужно поддерживать IE», но в наши дни ваша технология должна быть правильно ориентирована на вашу аудиторию, если вы работаете в Интернете. Сайт, ориентированный на разработчиков, тогда я сомневаюсь, что вам понадобится поддерживать ЛЮБЫЕ версии IE.
Брандито

17

Попробуй это:

HTML:

<div class="customselect">
    <select>
    <option>2000</option>
    <option>2001</option>
    <option>2002</option>
    </select>
</div>

CSS:

.customselect {
    width: 70px;
    overflow: hidden;
}

.customselect select {
   width: 100px;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
}

15

Попробуйте, это работает для меня,

<style>
    select{
        border: 0 !important;  /*Removes border*/
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        text-overflow:'';
        text-indent: 0.01px; /* Removes default arrow from firefox*/
        text-overflow: "";  /*Removes default arrow from firefox*/
    }
    select::-ms-expand {
        display: none;
    }
    .select-wrapper
    {
        padding-left:0px;
        overflow:hidden;
    }
</style>
    
<div class="select-wrapper">
     <select> ... </select>
</div>

Вы не можете скрыть, но используя скрытое переполнение, вы можете заставить его исчезнуть.


6

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

<div class="customselect">
    <select>
    <option>2000</option>
    <option>2001</option>
    <option>2002</option>
    </select>
</div>

.customselect {
    width: 80px;
    overflow: hidden;
   border:1px solid;
}

.customselect select {
   width: 100px;
   border:none;
  -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
}


4
select{
padding: 11px 50px 11px 10px;
background: rgba(255,255,255,1);
border-radius: 7px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
color: #8ba2d4;

}


2

Вы не можете сделать это с помощью полнофункциональной кросс-браузерной поддержки.

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

Теперь в этом div, возможно, добавьте тег select шириной 55 пикселей (что-то большее, чем ширина контейнера)

Я думаю, вы получите то, что вы хотите.

В случае, если вам не нужен какой-либо значок выпадения справа, просто сделайте все шаги, кроме плавания изображения справа. Установить контур: 0 в фокусе для тега выбора. Это оно


1
Я не могу получить помощь от этих подсказок. Кто-нибудь может дать адекватный код здесь? Спасибо.
user2301515

2

есть библиотека DropKick.js, которая заменяет обычные выпадающие списки на HTML / CSS, чтобы вы могли полностью стилизовать их и управлять ими с помощью javascript. http://dropkickjs.com/


2

Работает для всех браузеров и всех версий:

JS

jQuery(document).ready(function () {    
    var widthOfSelect = $("#first").width();
    widthOfSelect = widthOfSelect - 13;
    //alert(widthOfSelect);
    jQuery('#first').wrap("<div id='sss' style='width: "+widthOfSelect+"px; overflow: hidden; border-right: #000 1px solid;' width=20></div>");
});

HTML

<select class="first" id="first">
  <option>option1</option>
  <option>option2</option>
  <option>option3</option>
</select>
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.