Как убрать стрелку из выбранного элемента в Firefox

Я пытаюсь стилизовать selectэлемент с помощью CSS3. Я получаю желаемые результаты в WebKit (Chrome / Safari), но Firefox играет не очень хорошо (я даже не беспокоюсь о IE). Я использую appearanceсвойство CSS3 , но по какой-то причине я не могу выкинуть выпадающий значок из Firefox.

Вот пример того, что я делаю: http://jsbin.com/aniyu4/2/edit

#dropdown {
 -moz-appearance: none;
 -webkit-appearance: none;
 appearance: none;
 background: transparent url('example.png') no-repeat right center;
 padding: 2px 30px 2px 2px;
 border: none;
}

Как видите, я не пытаюсь сделать что-то необычное. Я просто хочу удалить стили по умолчанию и добавить собственную стрелку раскрывающегося списка. Как я уже сказал, отлично подходит для WebKit, не очень хорошо для Firefox. По-видимому, -moz-appearance: noneне избавиться от выпадающего элемента.

Любые идеи? Нет, JavaScript не вариант

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

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

По сути, это удаляет все форматирование поля выбора в 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-creation: window, и добавьте пользовательскую стрелку в класс диапазона «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 (после того, как я обновил).

Все отзывы приветствуются.

Обновление: это было исправлено в 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

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

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

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

КСТАТИ. если вы хотите красивые выпадающие списки, используйте http://harvesthq.github.com/chosen/

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

Начиная с 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>

Мы нашли простой и достойный способ сделать это. Это кросс-браузер, разлагаемый и не нарушает форму сообщения. Сначала установите флажок выбора 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 div innerHTML с помощью JavaScript. Easypeasy с помощью jQuery:

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

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

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

Попробуйте так:

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

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

Меня устраивает! ;)

Хотя это и не полное решение, я обнаружил, что ...

-moz-appearance: window;

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

Я думаю, что нашел решение, совместимое с 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

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

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

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

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

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

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

Мне нравится этот стиль

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

Я знаю, что этот вопрос немного старый, но так как он появляется в Google, и это «новое» решение:

appearance: normalКажется, работает нормально в Firefox для меня (версия 5 сейчас). но не в опере и 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>теги и еще много чего :-). Пожалуйста , не применяйте чрезмерную стилизацию к формам, если у вас нет веских причин.

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

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

Вот рабочая скрипка использующая этот метод.

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

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

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

опираясь на ответ @ 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;
}

В дополнение к ответу Joao Cunha , эта проблема в настоящее время включена в список дел Mozilla и предназначена для версии 35.

Для тех, кто желает, вот обходной путь Тодда Паркера, на который ссылается блог Куньи, который работает сегодня:

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

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

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

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

Рассчитать ширину элемента (SELECT Element) с помощью Jquery. Добавьте обертку вокруг элемента Select и держите переполнение скрытым для этого элемента. Убедитесь, что ширина этой обертки - appox. На 25 пикселей меньше, чем у элемента SELECT. Это можно легко сделать с помощью 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. Не нужно добавлять хаки фиксированной ширины с помощью CSS. Все это обрабатывается динамически с использованием JQuery.

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

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

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

Это работает

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

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

Я предлагаю вам рассмотреть возможность использования плагина selectBox jQuery . Это очень легко и красиво сделано.

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

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

Примете ли вы незначительные изменения в HTML?

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

Взглянуть.

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

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

Это должно обрезать 30px правой стороны поля выбора, убрав стрелку. Теперь добавьте фоновое изображение 170px и вуаля в стиле select

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

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

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

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

Ответ Джордана Янга самый лучший. Но если вы не можете или не хотите менять свой 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;
  }
}

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.

ТЛ; др:

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

Если вы не возражаете возиться с 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. Так что дайте элементу выбора класс и стилизуйте его.

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

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

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

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

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

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