Як видалити значок стрілки за замовчуванням зі спадного списку (виберіть елемент)?

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

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

Згадані раніше рішення добре працюють з хромом, але не на Firefox.

Я знайшов рішення, яке добре працює як у Chrome, так і в Firefox (не в IE). Додайте наступні атрибути до CSS для свого SELECTelement та відрегулюйте верхню маржу відповідно до ваших потреб.

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 пікселів, припустимо, і натисніть на потрібний значок, що випадає, праворуч від цього

Тепер у цей розділ можна додати тег вибору шириною 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>