Як видалити стрілку з елемента вибору у 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 роки вниз і мозіла нічого не зробила.

Я придумав просте вирішення.

Це, по суті, знімає все форматування поля вибору у firefox і обертає прольотний елемент навколо вибору у вашому користувальницькому стилі, але має застосовуватися лише до 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, додайте елемент 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-външності: вікно та перекиньте власну стрілку в клас "css-select-moz" span-класу, але отримайте її лише для відображення на 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 {
   -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 з тими ж розмірами, що і поле вибору. Діл повинен лежати під полем вибору як фон. Використовуйте { 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>

Оновіть внутрішнійHTML Div за допомогою javascript. Простота з 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), але елемент можна зробити невидимим кольором: 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-extension {display: none; } .yourid :: - ms-exapan {display: none; }

Я знаю, що це питання трохи старе, але оскільки воно з’являється в 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майно.

Ідея тут полягає в накладенні елемента на натиснуту стрілку вниз (щоб створити нашу власну), а потім заборонити на ній події вказівника. [див. цю публікацію ]

Ось працює FIDDLE, використовуючи цей метод.

Також у цій відповіді ТА я детальніше обговорював цей та інший метод.

Це працює (тестовано на 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;
}

На додаток до відповіді Жоао Куньї , ця проблема тепер знаходиться в списку ToDo Mozilla і призначена для версії 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;
}

Оскільки Firefox 35, " -moz-appearance:none" який ви вже написали у своєму коді, нарешті видаліть кнопку зі стрілкою за бажанням.

Це була помилка вирішена з тієї версії.

Тут і там відбувається багато дискусій, але я не бачу належного рішення для цієї проблеми. Нарешті закінчився написанням невеликого Jquery + CSS-коду для виконання цього HACK на IE & Firefox.

Обчисліть ширину елемента (SELECT Element) за допомогою Jquery. Додайте обгортку навколо вибраного елемента і зберігайте переповнення прихованим для цього елемента. Переконайтесь, що Ширина цього обгортка відповідає розміру. На 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); }

На цьому слід зафіксувати 30 пікселів правої сторони поля вибору, знімаючи стрілку. Тепер надайте фонове зображення та вуалу 170 пікселів у стилі select

Це величезний злом, але -moz-appearance: menulist-textможе зробити трюк.

У мене виникло те саме питання. Це легко зробити на FF та Chrome, але в IE (8+, який нам потрібно підтримувати) все ускладнюється. Найпростіше рішення, яке я міг знайти для спеціальних елементів вибору, що працює "скрізь, де я намагався", включаючи 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-element, щоб прикрити потворну стрілку. Оскільки вибір не підтримує: після, мені потрібна обгортка для роботи. Тепер, якщо ви натиснете на стрілку, випадаюче меню не зареєструє її, якщо ваш веб-переглядач не підтримує 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;
};

Fiddle тут: JS Fiddle

Умова полягає в тому, що ви повинні стилізувати вибір з нуля (це означає встановити фон і рамку), але ви, ймовірно, хочете це зробити все одно.

Оскільки функція замінює оригінал вибору ділом, ви втратите будь-який стиль, виконаний безпосередньо на селекторі вибору у вашому CSS. Тож надайте елементу вибору клас та стилю класу.

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

Інші відповіді, здається, не спрацювали для мене, але я знайшов цей злом. Це працювало для мене (липень 2014 р.)

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

У моєму випадку я також мав поле для введення комерційної торгівлі, тому я використав це

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

Оновлено мою відповідь, щоб показати вибір, а не введення