Выберите удаление стрелки вниз

Ответ 1

нет необходимости в хаках или переполнении... есть псевдоэлемент для стрелки вниз по IE ​​...

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

Ответ 2

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

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

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

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

Ответ 3

Простой способ удалить стрелку вниз из списка в Chrome и Mozilla

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 {
        /*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

Попробуйте следующее:

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/

Ответ 5

Попробуйте следующее:

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

Ответ 6

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

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

Ответ 7

select {
    /*for firefox*/
    -moz-appearance: none;
    /*for chrome*/
    -webkit-appearance:none;
}

Простой и эффективный. Это работает!

Ответ 8

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

Ответ 9

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;

}

Ответ 10

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

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

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

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

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

Ответ 11

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

Ответ 12

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

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>

Ответ 13

Как я ответил в Удалить стрелку выбора в 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;
}