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

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

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

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

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

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

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

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

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

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

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

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>

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

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/

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

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

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

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

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

Просто хотел завершить тему. Чтобы быть очень ясным, это не работает в 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;
}

Как я ответил в Удалить Выберите стрелку на IE

Если вы хотите использовать класс и псевдокласс:

.simple-control ваш класс CSS

:disabled это псевдо класс

select.simple-control:disabled{
         /*For FireFox*/
        -webkit-appearance: none;
        /*For Chrome*/
        -moz-appearance: none;
}

/*For IE10+*/
select:disabled.simple-control::-ms-expand {
        display: none;
}

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;

}

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

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

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

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

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

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

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

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>