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

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

30 ответов


хорошо, я знаю, что этот вопрос старый, но 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-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 часа назад (я новичок в webdesign и полностью самоучка). Тем не менее, это сообщество косвенно предоставило мне столько помощи, что я подумал, что пришло время мне что-то вернуть.

Я тестировал его только в 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% и примените переполнение: hidden

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

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

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


Важное Замечание:

С Firefox V35 свойство внешнего вида теперь работает !!

С официальные заметки о выпуске firefox на V35:

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

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

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

демо

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

обновите innerHTML div с помощью 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;

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

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


хотя это не полное решение, я нашел, что...

-moz-appearance: window;

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


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

Я использовал вариант 1: Родриго-Ludgero выложил это исправить на 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 просто нравится это

<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-развернуть {дисплей: нет; } .yourid::-ms-exapan {дисплей: нет; }


Я знаю, что этот вопрос немного старый, но так как он появляется в 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> теги, и еще много чего: -) пожалуйста не примените чрезмерный стиль к формам, если у вас нет очень веской причины.


использовать pointer-events собственность.

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

вот работает скрипка используя этот метод.

кроме того, в это так ответ Я обсудил этот и другой метод более подробно.


это работает (проверено на 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;
}

дальше Жоао Кунья-х эта проблема сейчас в списке задач Mozilla и предназначен для ver 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 для этого взлома на IE и Firefox.

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

вот пример кода, который был сделан для 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


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

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

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


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

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


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

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

посмотреть.


или вы можете обрезать 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). У вас нет никаких мух, поэтому было бы неплохо, если бы вы могли проверить и прокомментировать:

<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-элемент, чтобы покрыть уродливую стрелку. Поскольку select не поддерживает: после, мне нужна обертка для работы. Теперь, если вы нажмете на стрелку, выпадающий список не зарегистрирует его ... если Ваш браузер не поддерживает pointer-events: none, который все, кроме IE10-делает:http://caniuse.com/#feat=pointer-events

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

tl; dr:

Если пользователи 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, вы потеряете любой стиль выполняется непосредственно на селекторе select в вашем CSS. Поэтому дайте элементу select класс и стиль класса.

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


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

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

его работает


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

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

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

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

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