Как удалить стрелку из элемента select в Firefox

Ответ 1

Хорошо, я знаю, что этот вопрос старый, но через 2 года по трассе и мозилле ничего не сделали.

Я придумал простой обходной путь.

Это существенно блокирует все форматирование окна выбора в firefox и обертывает элемент span вокруг поля выбора с вашим пользовательским стилем, но он должен применяться только к firefox.

Скажите, что это ваше меню:

<select class='css-select'>
  <option value='1'> First option </option>
  <option value='2'> Second option </option>
</select>

И давайте предположим, что класс css 'css-select' есть:

.css-select {
   background-image: url('images/select_arrow.gif');
   background-repeat: no-repeat;
   background-position: right center;
   padding-right: 20px;
}

В firefox это отобразится с помощью меню выбора, за которым следует уродливая стрелка выбора firefox, а затем ваш красивый пользовательский вид. Не идеально.

Теперь, чтобы получить это в firefox, добавьте элемент span вокруг класса 'css-select-moz':

   <span class='css-select-moz'>
     <select class='css-select'>
       <option value='1'> First option </option>
       <option value='2'> Second option </option>
     </select>
   </span>

Затем исправьте CSS, чтобы скрыть грязную стрелку mozilla с окном -moz-appearance: window и выбросить пользовательскую стрелку в класс span 'css-select-moz', но только получить его для отображения на mozilla, например:

.css-select {
   -moz-appearance:window;
   background-image: url('images/select_arrow.gif');
   background-repeat: no-repeat;
   background-position: right center;
   padding-right: 20px;
}

@-moz-document url-prefix() {
.css-select-moz{
     background-image: url('images/select_arrow.gif');
     background-repeat: no-repeat;
     background-position: right center;
     padding-right: 20px;
  }
} 

Довольно круто, только для спотыкания по этой ошибке 3 часа назад (я новичок в веб-дизайне и полностью самоучка). Тем не менее, это сообщество косвенно оказало мне такую ​​помощь, я подумал, что пришло время вернуть что-то.

Я тестировал его только в firefox (mac) версии 18, а затем 22 (после того, как я обновил).

Вся обратная связь приветствуется.

Ответ 2

Обновление: это было исправлено в Firefox v35. Подробнее см. полный текст.

Только что понял , как удалить стрелку выбора из Firefox. Хитрость заключается в использовании комбинации -prefix-appearance, text-indent и text-overflow. Это чистый CSS и не требует дополнительной разметки.

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

Проверено на Windows 8, Ubuntu и Mac, последние версии Firefox.

Пример в реальном времени: http://jsfiddle.net/joaocunha/RUEbp/1/

Подробнее по теме: https://gist.github.com/joaocunha/6273016

Ответ 3

Трюк, который работает для меня, - это сделать ширину выбора более 100% и применить переполнение: скрытый

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

Это единственный способ прятать стрелку вниз в FF.

BTW. если вы хотите, чтобы красивые выпадающие списки использовали http://harvesthq.github.com/chosen/

Ответ 4

Важное обновление:

Начиная с Firefox V35 теперь появляется свойство внешнего вида!!

Из официальных релизов версии firefox на V35:

Используя -moz-appearance со значением none в поле со списком, удалите выпадающая кнопка (ошибка 649849).

Итак, теперь, чтобы скрыть стрелку по умолчанию - это так же просто, как добавить следующие правила в наш элемент select:

select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
}

DEMO

select {
  margin: 50px;
  border: 1px solid #111;
  background: transparent;
  width: 150px;
  padding: 5px;
  font-size: 16px;
  border: 1px solid #ccc;
  height: 34px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

<select>
  <option>Apples</option>
  <option selected>Pineapples</option>
  <option>Chocklate</option>
  <option>Pancakes</option>
</select>

Ответ 5

Мы нашли простой и достойный способ сделать это. Это кросс-браузер, разлагаемый и не разбивает сообщение формы. Сначала установите поле выбора opacity на 0.

.select { 
    opacity : 0;
    width: 200px;
    height: 15px;
}

<select class='select'>
    <option value='foo'>bar</option>    
</select>

это значит, что вы все равно можете нажать на него

Затем сделайте div с теми же размерами, что и поле выбора. Div должен лежать под полем выбора в качестве фона. Используйте { position: absolute } и z-index, чтобы достичь этого.

.div {
    width: 200px;
    height: 15px;
    position: absolute;
    z-index: 0;
}

<div class='.div'>{the text of the the current selection updated by javascript}</div>
<select class='select'>
    <option value='foo'>bar</option>    
</select>

Обновите div innerHTML с помощью javascript. Easypeasy с jQuery:

$('.select').click(function(event)) { 
    $('.div').html($('.select option:selected').val());
}

Что это! Просто создайте свой div вместо поля выбора. Я не тестировал вышеуказанный код, поэтому вам, вероятно, потребуется его настроить. Но, надеюсь, вы получите суть.

Я думаю, что это решение бьет {-webkit-appearance: none;}. То, что браузеры должны делать в самом лучшем случае, диктует взаимодействие с элементами формы, но определенно не то, как их изначально отображали на странице, так как это нарушает дизайн сайта.

Ответ 6

Попробуйте следующим образом:

-webkit-appearance: button;
-moz-appearance: button;

Затем вы можете использовать другое изображение в качестве фона и поместить его:

background-image: url(images/select-arrow.png);
background-position: center right;
background-repeat: no-repeat;

Существует другой способ для moz-браузеров:

text-indent:10px;

Если у вас есть определенная ширина, которую вы выберите, это свойство будет нажимать кнопку сброса по умолчанию в области выбора.

Это работает для меня!;)

Ответ 7

Пока не было полного решения, я обнаружил, что...

-moz-appearance: window;

... работает в некоторой степени. Вы не можете изменить фон (-color или -image), но элемент может быть невидимым с цветом: прозрачным. Не идеально, но это начало, и вам не нужно заменять элемент системного уровня на js one.

Ответ 8

Я думаю, что нашел решение совместимым с FF31!!!
Вот два варианта, которые хорошо объясняются по этой ссылке:
http://www.currelis.com/hiding-select-arrow-firefox-30.html


Я использовал вариант 1: Родриго-Людгеро опубликовал это исправление в Github, включая онлайн-демонстрацию. Я тестировал эту демонстрацию на Firefox 31.0 и, похоже, работает правильно. Протестировано и в Chrome, и в IE. Вот код html:

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Custom Select</title>
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div class="custom-select fa-caret-down">
            <select name="" id="">
                <option value="">Custom Select</option>
                <option value="">Custom Select</option>
                <option value="">Custom Select</option>
            </select>
        </div>
    </body>
</html>

и css:

.custom-select {
    background-color: #fff;
    border: 1px solid #ccc;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 0 2em;
    padding: 0;
    position: relative;
    width: 100%;
    z-index: 1;
}

.custom-select:hover {
    border-color: #999;
}

.custom-select:before {
    color: #333;
    display: block;
    font-family: 'FontAwesome';
    font-size: 1em;
    height: 100%;
    line-height: 2.5em;
    padding: 0 0.625em;
    position: absolute;
    top: 0;
    right: 0;
    text-align: center;
    width: 1em;
    z-index: -1;
}

.custom-select select {
    background-color: transparent;
    border: 0 none;
    box-shadow: none;
    color: #333;
    display: block;
    font-size: 100%;
    line-height: normal;
    margin: 0;
    padding: .5em;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.custom-select select::-ms-expand {
    display: none; /* to ie 10 */
}

.custom-select select:focus {
    outline: none;
}
/* little trick for custom select elements in mozilla firefox  17/06/2014 @rodrigoludgero */
:-moz-any(.custom-select):before {
    background-color: #fff; /* this is necessary for overcome the caret default browser */
    pointer-events: none; 
    z-index: 1; /* this is necessary for overcome the pseudo element */
}

http://jsbin.com/pozomu/4/edit


Это работает очень хорошо для меня!

Ответ 9

К сожалению для вас это "что-то причудливое". Обычно это не веб-авторы, которые реорганизуют элементы формы. Многие браузеры специально не позволяют вам создавать их, чтобы пользователь мог видеть элементы управления ОС, к которым они привыкли.

Единственный способ сделать это последовательно над браузерами и операционными системами - использовать JavaScript и заменить элементы select на "DHTML".

В следующей статье показаны три плагина, основанные на jQuery, которые позволяют вам это сделать (это немного устарело, но я не мог найти что-либо прямо сейчас)

http://www.queness.com/post/204/25-jquery-plugins-that-enhance-and-beautify-html-form-elements#1

Ответ 10

/* Try this in FF30+ Covers up the arrow, turns off the background */ 
/* still lets you style the border around the image and allows selection on the arrow */


@-moz-document url-prefix() {

    .yourClass select {
        text-overflow: '';
        text-indent: -1px;
        -moz-appearance: none;
        background: none;

    }

    /*fix for popup in FF30 */
    .yourClass:after {
        position: absolute;
        margin-left: -27px;
        height: 22px;
        border-top-right-radius: 6px;
        border-bottom-right-radius: 6px;
        content: url('../images/yourArrow.svg');
        pointer-events: none;
        overflow: hidden;
        border-right: 1px solid #yourBorderColour;
        border-top: 1px solid #yourBorderColour;
        border-bottom: 1px solid #yourBorderColour; 
    }
}

Ответ 11

Я настраиваю выбор, просто нравится это

<select style="     -moz-appearance: radio-container;
                -webkit-appearance: none;
                 appearance: none;
">

Он работает для меня в FF, Safari и Chrome во всех версиях, которые я тестировал.

В IE я помещаю:

 select::-ms-expand {
 display: none;
}
/*to remove in all selects*/

Также вы можете:      .yourclass:: - ms-expand {display: none;   }   .yourid:: - ms-exapan {display: none;   }

Ответ 12

Я знаю, что этот вопрос немного устарел, но поскольку он появляется на google, и это "новое" решение:

appearance: normal Кажется, для меня отлично работает в Firefox (версия 5 сейчас). но не в Opera и IE8/9

В качестве обходного пути для Opera и IE9 я использовал псевдоселектор :before для создания нового белого квадрата и поместил его поверх стрелки.

К сожалению, в IE8 это не работает. Коробка отображается правильно, но стрела просто торчит в любом случае...: -/

Использование select:before отлично работает в Opera, но не в IE. Если я посмотрю на инструменты разработчика, я вижу, что он правильно читает правила, а затем просто игнорирует их (они вычеркнуты). Поэтому я использую <span class="selectwrap"> вокруг фактического <select>.

select {
  -webkit-appearance: normal;
  -moz-appearance: normal;
  appearance: normal;
}
.selectwrap { position: relative; }
.selectwrap:before {
  content: "";
  height: 0;
  width: 0;
  border: .9em solid red;
  background-color: red;
  position: absolute;
  right: -.1em;
  z-index: 42;
}

Возможно, вам придется немного подкорректировать это, но это работает для меня!

Отказ от ответственности: Я использую это, чтобы получить красивую печатную копию веб-страницы с формами, поэтому мне не нужно создавать вторую страницу. Я не 1337 haxx0r, который хочет красные полосы прокрутки, теги <marquee> и еще что-то:-) Пожалуйста, не применяйте чрезмерный стиль к формам, если у вас нет веских оснований.

Ответ 13

Используйте свойство pointer-events.

Идея здесь состоит в том, чтобы наложить элемент на собственную стрелку вниз (чтобы создать наш собственный), а затем запретить на нем события указателя. [см. этот пост]

Вот этот FIDDLE.

Кроме того, в этот ответ SO я обсуждал этот и другой метод более подробно.

Ответ 14

Это работает (проверено на Firefox 23.0.1):

select {
    -moz-appearance: radio-container;
}

Ответ 15

основываясь на ответе @JoãoCunha, один CSS-стиль, который полезен для более одного браузера

select {
    /*for firefox*/
    -moz-appearance: none;
    /*for chrome*/
    -webkit-appearance:none;
    text-indent: 0.01px;
    text-overflow: '';
}
/*for IE10*/
select::-ms-expand {
    display: none;
}

Ответ 16

Много дискуссий происходит здесь и там, но я не вижу правильного решения этой проблемы. Наконец закончилось написанием небольшого кода Jquery + CSS для этого HACK в IE и Firefox.

Вычислить ширину элемента (элемент SELECT) с помощью JQuery. Добавьте обтекатель вокруг элемента и сохраните переполнение, скрытое для этого элемента. Убедитесь, что ширина этой обертки - это appox. 25px меньше, чем у SELECT Element. Это можно легко сделать с помощью JQuery. Итак, теперь наша икона ушла...! и пришло время добавить значок изображения на элементе SELECT...!!! Просто добавьте несколько простых линий для добавления фона, и вы все сделали..!! Обязательно используйте переполнение, скрытое для внешней оболочки,

Вот пример кода, который был сделан для Drupal. Однако он может использоваться и для других, удаляя несколько строк кода, которые являются специфичными для Drupal.

/*
 * Jquery Code for Removing Dropdown Arrow.
 * @by: North Web Studio
 */
(function($) {
  Drupal.behaviors.nwsJS = {
    attach: function(context, settings) {
      $('.form-select').once('nws-arrow', function() {
        $wrap_width = $(this).outerWidth();
        $element_width = $wrap_width + 20;
        $(this).css('width', $element_width);
        $(this).wrap('<div class="nws-select"></div>');
        $(this).parent('.nws-select').css('width', $wrap_width);
      });
    }
  };
})(jQuery);

/*
 * CSS Code for Removing Dropdown Arrow.
 * @by: North Web Studio
 */

.nws-select {
  border: 1px solid #ccc;
  overflow: hidden;
  background: url('../images/icon.png') no-repeat 95% 50%;
}
.nws-select .form-select {
  border: none;
  background: transparent;
}

Решение работает во всех браузерах IE, Chrome и Firefox Нет необходимости добавлять фиксированные Widths Hacks с помощью CSS. Все это обрабатывается динамически с помощью JQuery.!

Подробнее Описано: - http://northwebstudio.com/blogs/1/jquery/remove-drop-down-arrow-html-select-element-using-jquery-and-css

Ответ 17

В дополнение к ответ Жоао Кунья, эта проблема теперь в списке Mozilla ToDo и предназначен для версии 35.

Для желающих, это обходное решение Тодда Паркера, упомянутое в блоге Cunha, которое работает сегодня:

http://jsfiddle.net/xvushd7x/

HTML:

<label class="wrapper">This label wraps the select
    <div class="button custom-select ff-hack">
        <select>
            <option>Apples</option>
            <option>Bananas</option>
            <option>Grapes</option>
            <option>Oranges</option>
            <option>A very long option name to test wrapping</option>
        </select>
    </div>
</label>

CSS

/* Label styles: style as needed */
label {
  display:block;
  margin-top:2em;
  font-size: 0.9em;
  color:#777;
}

/* Container used for styling the custom select, the buttom class below adds the bg gradient, corners, etc. */
.custom-select {
  position: relative;
  display:block;
  margin-top:0.5em;
  padding:0;
}

/* These are the "theme" styles for our button applied via separate button class, style as you like */
.button {
  border: 1px solid #bbb;
  border-radius: .3em;
  box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
  background: #f3f3f3; /* Old browsers */
  background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* IE10+ */
  background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%); /* W3C */
}

/* This is the native select, we're making everything but the text invisible so we can see the button styles in the wrapper */
.custom-select select {
  width:100%;
  margin:0;
  background:none;
  border: 1px solid transparent;
  outline: none;
  /* Prefixed box-sizing rules necessary for older browsers */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  /* Remove select styling */
  appearance: none;
  -webkit-appearance: none;
  /* Font size must the 16px or larger to prevent iOS page zoom on focus */
  font-size:16px;
  /* General select styles: change as needed */
  font-family: helvetica, sans-serif;
  font-weight: bold;
  color: #444;
  padding: .6em 1.9em .5em .8em;
  line-height:1.3;
}


/* Custom arrow sits on top of the select - could be an image, SVG, icon font, etc. or the arrow could just baked into the bg image on the select. Note this si a 2x image so it will look bad in browsers that don't support background-size. In production, you'd handle this resolution switch via media query but this is a demo. */

.custom-select::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 8px;
  top: 50%;
  right: 1em;
  margin-top:-4px;
  background-image: url(http://filamentgroup.com/files/select-arrow.png);
  background-repeat: no-repeat;
  background-size: 100%;
  z-index: 2;
  /* These hacks make the select behind the arrow clickable in some browsers */
  pointer-events:none;
}


/* Hover style */
.custom-select:hover {
  border:1px solid #888;
}

/* Focus style */
.custom-select select:focus {
  outline:none;
  box-shadow: 0 0 1px 3px rgba(180,222,250, 1);
  background-color:transparent;
  color: #222;
  border:1px solid #aaa;
}

/* Set options to normal weight */
.custom-select option {
  font-weight:normal;
}

Ответ 18

Так как Firefox 35, "-moz-appearance:none", который вы уже написали в своем коде, в конце концов удалите кнопку со стрелкой.

Это была ошибка, разрешенная с этой версии.

Ответ 19

Свойство appearance из CSS3 не позволяет использовать значение none. Посмотрите ссылку W3C. Итак, то, что вы пытаетесь сделать, недействительно (действительно, Chrome тоже не должен принимать).

Тогда, к сожалению, у нас действительно нет кросс-браузерного решения, чтобы скрыть эту стрелку, используя чистый CSS. Как указано, вам понадобится JavaScript.

Я предлагаю вам использовать selectBox jQuery plugin. Он очень легкий и красиво выполнен.

Ответ 20

Вы можете увеличить ширину окна и сдвинуть стрелку ближе к левому краю стрелки. это затем позволяет покрыть стрелку пустым белым div.

Посмотрите: http://jsbin.com/aniyu4/86/edit

Ответ 21

Не могли бы вы принять незначительные изменения в html?

Что-то вроде размещения тега div, содержащего тег select.

Посмотрите.

Ответ 22

Или вы можете скопировать выделение. Что-то вроде:

select { width:200px; position:absolute; clip:rect(0, 170px, 50px, 0); }

Это должно закрепить 30 пикселей правой части окна выбора, удалив стрелку. Теперь поставьте 170px background image и voila, в стиле выберите

Ответ 23

Это огромный взлом, но -moz-appearance: menulist-text может сделать трюк.

Ответ 24

Полезный взлом для меня - установить (выберите) на inline-flex. Вырезает стрелку прямо из моей кнопки выбора. Без всего добавленного кода.

• Только для Fx. -webkit appearance все еще необходимо для Chrome и т.д.

Ответ 25

У меня была такая же проблема. Легко заставить его работать с FF и Chrome, но в IE (8+, которые нам нужно поддерживать) все усложняется. Самое легкое решение, которое я смог найти для пользовательских элементов выбора, которые работают "везде, где я пытался", включая IE8, использует . CustomSelect()

Ответ 26

Иордания Молодой ответ лучший. Но если вы не можете или не хотите менять свой HTML-код, вы можете просто удалить обычную стрелку вниз, указанную в Chrome, Safari и т.д., И оставить стрелу по умолчанию для Firefox, но без двойных стрелок. Не идеальное, но быстрое быстрое исправление, которое не добавляет HTML и не ставит под угрозу ваш пользовательский внешний вид в других браузерах.

<select>
  <option value='1'> First option </option>
  <option value='2'> Second option </option>
</select>

CSS

select {
   background-image: url('images/select_arrow.gif');
   background-repeat: no-repeat;
   background-position: right center;
   padding-right: 20px;
}

@-moz-document url-prefix() {
  select {
    background-image: none;
  }
}

Ответ 27

hackity hack... решение, которое работает в каждом браузере, который я тестировал (Safari, Firefox, Chrome). У меня нет IE, лежащих вокруг, так что было бы неплохо, если бы вы могли протестировать и прокомментировать:

<div class="wrapper">
  <select>
    <option>123456789</option>
    <option>234567890</option>
  </select>
</div>

CSS, с URL-кодированным изображением:

.wrapper { position:relative; width:200px; }
.wrapper:after {
  content:"";
  display: block;
  position: absolute;
  top:1px; height:28px;
  right:1px; width:16px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAcCAYAAACH81QkAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowODgwMTE3NDA3MjA2ODExOEE2RENENTU2MTFGMEQ1RCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpGNDE5NDQ3Nzc5ODIxMUU0OEU0M0JFMzgzMkUxOTk3MiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpGNDE5NDQ3Njc5ODIxMUU0OEU0M0JFMzgzMkUxOTk3MiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDk4MDExNzQwNzIwNjgxMThBNkRDRDU1NjExRjBENUQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDg4MDExNzQwNzIwNjgxMThBNkRDRDU1NjExRjBENUQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4o7anbAAAAjklEQVR42uzUsQ3EIAwFUPty7MBOsAoVC7EVYgyUSFcdzn0iJYquAZGSLxnLzatsWERWGsvGP0QGkc+LxvN9AqGJTKQJMcYQM/+VtbZdiTGKUgr3cxbmlJI0ZiW83vsbgrkjB5JzFq11BdAxdyNICKEi6J25kFKKOOdq70We+JS2ufYTacjyxrKMLtsuwAAznzqGLHX9BwAAAABJRU5ErkJggg==);

  pointer-events: none;
}

select {
  width: 100%;
  padding:3px;
  margin: 0;
  border-radius: 0;
  border:1px solid black;
  outline:none;
  display: inline-block;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  cursor:pointer;
  float:none!important;
  background:white;

  font-size:13px;
  line-height: 1em;
  height: 30px;
  padding:6px 20px 6px 10px;
}

http://codepen.io/anon/pen/myPEBy

Я использую: after-element, чтобы покрыть уродливую стрелку. Поскольку select не поддерживает: после, мне нужна оболочка для работы. Теперь, если вы нажмете на стрелку, выпадающее меню не будет регистрировать его... если ваш браузер не поддерживает pointer-events: none, который все, кроме IE10, делают: http://caniuse.com/#feat=pointer-events

Итак, для меня это идеально - хорошее, чистое решение с низкой головной болью, по крайней мере, по сравнению со всеми другими вариантами, которые включают javascript.

TL;DR:

Если IE10 (или ниже) пользователи нажимают на стрелку, это не сработает. Хорошо работает для меня...

Ответ 28

Если вы не против возиться с JS, я написал небольшой плагин jQuery, который поможет вам это сделать. С его помощью вам не нужно беспокоиться о префиксах поставщиков.

 $.fn.magicSelectBox = function() {
  var $e = this;

  $e.each(function() {
    var $select = $(this);

    var $magicbox = $('<div></div>').attr('class', $select.attr('class')).attr('style', $select.attr('style')).addClass('magicbox');
    var $innermagicbox = $('<div></div>').css({
      position: 'relative',
      height: '100%'
    });
    var $text = $('<span></span>').css({
      position: 'absolute'
    }).text($select.find("option:selected").text());

    $select.attr('class', null).css({
      width: '100%',
      height: '100%',
      opacity: 0,
      position: 'absolute'
    }).on('change', function() {
      $text.text($select.find("option:selected").text());
    });

    $select.parent().append($magicbox);
    $innermagicbox.append($text, $select);
    $magicbox.append($innermagicbox);
  });

  return $e;
};

Заклинание здесь: JS Fiddle

Условие заключается в том, что вам нужно стилизовать выбор с нуля (это означает настройку фона и границы), но вы, вероятно, захотите сделать это в любом случае.

Кроме того, поскольку функция заменяет исходный выбор с помощью div, вы потеряете любой стиль, сделанный непосредственно на селекторе выбора в вашем CSS. Поэтому дайте элементу select класс и стиль класса.

Поддерживает большинство современных браузеров, если вы хотите настроить таргетинг на старые браузеры, вы можете попробовать более старую версию jQuery, но, возможно, придется заменить на() функцией bind() в функции (не тестировалось)

Ответ 29

попробуйте этот css

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

Работает

Ответ 30

Другие ответы, похоже, не работали для меня, но я нашел этот хак. Это сработало для меня (июль 2014 года)

select {
-moz-appearance: textfield !important;
    }

В моем случае у меня также было поле ввода woocommerce, поэтому я использовал этот

.woocommerce .quantity input.qty {
-moz-appearance: textfield !important;
 }

Обновлен мой ответ, чтобы показать select, а не ввод