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

Я хочу удалить стрелку вниз из select в html. Например

 2000 2001 2002 ...  

Как это сделать в 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 { -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:

 

CSS:

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

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

  

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

 
.customselect { width: 80px; overflow: hidden; border:1px solid; } .customselect select { width: 100px; border:none; -moz-appearance: none; -webkit-appearance: none; appearance: 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; 

}

Как я ответил в стрелке Remove Select в IE

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

.simple-control – ваш class css

:disabled – псевдоclass

 select.simple-control:disabled{ /*For FireFox*/ -webkit-appearance: none; /*For Chrome*/ -moz-appearance: none; } /*For IE10+*/ select:disabled.simple-control::-ms-expand { display: none; } 

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

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

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

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

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

есть библиотека под названием 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("
"); });

HTML