Como remover a seta de um elemento selecionado no Firefox

Estou tentando estilizar um selectelemento usando CSS3. Estou obtendo os resultados desejados no WebKit (Chrome / Safari), mas o Firefox não está funcionando bem (nem estou me incomodando com o IE). Estou usando a appearancepropriedade CSS3 , mas por algum motivo não consigo retirar o ícone suspenso do Firefox.

Aqui está um exemplo do que estou fazendo: 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;
}

Como você pode ver, não estou tentando nada sofisticado. Eu só quero remover os estilos padrão e adicionar minha própria seta suspensa. Como eu disse, ótimo no WebKit, não ótimo no Firefox. Aparentemente, o -moz-appearance: noneitem não se livra do item suspenso.

Alguma ideia? Não, o JavaScript não é uma opção

Ok, eu sei que essa pergunta é antiga, mas há 2 anos e o mozilla não fez nada.

Eu vim com uma solução simples.

Isso basicamente retira toda a formatação da caixa de seleção no firefox e envolve um elemento de extensão em torno da caixa de seleção com seu estilo personalizado, mas deve aplicar-se apenas ao firefox.

Diga que este é o seu menu de seleção:

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

E vamos supor que a classe css 'css-select' seja:

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

No firefox, isso seria exibido no menu de seleção, seguido pela seta de seleção feia do firefox, seguida pela sua aparência personalizada personalizada. Não é ideal.

Agora, para fazer isso no firefox, adicione um elemento span com a classe '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>

Em seguida, corrija o CSS para ocultar a seta suja do mozilla com -moz-aparecimento: window e jogue a seta personalizada na classe do span 'css-select-moz', mas faça com que ela seja exibida no mozilla, assim:

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

Muito legal por tropeçar neste bug há 3 horas (eu sou novo em webdesign e completamente autodidata). No entanto, essa comunidade me forneceu indiretamente tanta ajuda que pensei que estava na hora de devolver algo.

Eu só testei no firefox (mac) versão 18 e 22 (depois da atualização).

Todos os comentários são bem-vindos.

Atualização: isso foi corrigido no Firefox v35. Veja a lista completa para detalhes.

Acabei de descobrir como remover a seta de seleção do Firefox . O truque é usar uma mistura de -prefix-appearance, text-indente text-overflow. É CSS puro e não requer marcação extra.

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

Testado no Windows 8, Ubuntu e Mac, versões mais recentes do Firefox.

Exemplo ao vivo: http://jsfiddle.net/joaocunha/RUEbp/1/

Mais sobre o assunto: https://gist.github.com/joaocunha/6273016

O truque que funciona para mim é tornar a largura da seleção mais de 100% e aplicar o estouro: hidden

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

Agora é a única maneira de ocultar a seta suspensa no FF.

Entre. se você quiser belas listas suspensas, use http://harvesthq.github.com/chosen/

Atualização Importante:

A partir do Firefox V35, a propriedade de aparência agora funciona!

Das notas de lançamento oficiais do firefox na V35 :

Agora, usando -moz-appearanceo nonevalor em uma caixa de combinação, remova o botão suspenso (bug 649849).

Portanto, agora, para ocultar a seta padrão - é tão fácil quanto adicionar as seguintes regras em nosso elemento 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>

Encontramos uma maneira simples e decente de fazer isso. É cross-browser, degradável e não quebra uma publicação de formulário. Primeiro, defina as caixas de seleção opacitycomo 0.

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

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

isso é para que você ainda possa clicar nele

Em seguida, faça div com as mesmas dimensões da caixa de seleção. A div deve estar sob a caixa de seleção como plano de fundo. Use { position: absolute }e z-indexpara conseguir isso.

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

Atualize o innerHTML da div com javascript. Fácil com jQuery:

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

É isso aí! Apenas estilize sua div em vez da caixa de seleção. Como não testei o código acima, você provavelmente precisará ajustá-lo. Mas espero que você entenda a essência.

Eu acho que essa solução é melhor {-webkit-appearance: none;}. O que os navegadores devem fazer no máximo é ditar a interação com os elementos do formulário, mas definitivamente não a forma como eles são exibidos inicialmente na página, pois isso quebra o design do site.

Tente desta maneira:

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

Em seguida, você pode usar uma imagem diferente como plano de fundo e colocá-la:

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

Existe outra maneira para os navegadores moz:

text-indent:10px;

Se você tiver definido uma largura para selecionar, essa propriedade pressionará o botão da caixa de depósito padrão abaixo da área de seleção.

Funciona para mim! ;)

Embora não seja uma solução completa, descobri que…

-moz-appearance: window;

... funciona até certo ponto. Você não pode alterar o plano de fundo (-color ou -image), mas o elemento pode ficar invisível com color: transparent. Não é perfeito, mas é um começo e você não precisa substituir o elemento do nível do sistema por um js.

Acho que achei a solução compatível com o FF31 !!!
Aqui estão duas opções bem explicadas neste link:
http://www.currelis.com/hiding-select-arrow-firefox-30.html

Eu usei a opção 1: Rodrigo-Ludgero postou essa correção no Github, incluindo um online demo. Testei esta demonstração no Firefox 31.0 e ela parece estar funcionando corretamente. Testado no Chrome e IE também. Aqui está o código 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>

e o 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

Funciona muito bem para mim!

Infelizmente para você isso é "algo chique". Normalmente, não é o local dos autores da web para redesenhar os elementos do formulário. Muitos navegadores intencionalmente não permitem que você os estilize, para que o usuário veja os controles do SO aos quais está acostumado.

A única maneira de fazer isso de forma consistente nos navegadores e sistemas operacionais é usar JavaScript e substituir os selectelementos por "DHTML".

O artigo a seguir mostra três plugins baseados em jQuery que permitem fazer isso (é um pouco antigo, mas não consegui encontrar nada atual no momento)

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

Estou denominando o seleto como este

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

Funciona para mim no FF, Safari e Chrome em todas as versões que testei.

No IE eu coloquei:

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

Você também pode: .yourclass :: - ms-expand {display: none; } .yourid :: - ms-exapan {display: none; }

Eu sei que essa pergunta é um pouco antiga, mas como aparece no google, e esta é uma solução "nova":

appearance: normalParece funcionar bem no Firefox para mim (versão 5 agora). mas não no Opera e IE8 / 9

Como solução alternativa para o Opera e o IE9, usei o :beforepseudoselector para criar uma nova caixa branca e colocá-la no topo da seta.

Infelizmente, no IE8, isso não funciona. A caixa é renderizada corretamente, mas a seta se destaca de qualquer maneira ...: - /

Usar select:beforefunciona bem no Opera, mas não no IE. Se eu olhar para as ferramentas do desenvolvedor, vejo que elas estão lendo as regras corretamente e depois as ignoram (elas estão riscadas). Então eu uso um em <span class="selectwrap">torno do real <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;
}

Você pode precisar ajustar isso um pouco, mas isso funciona para mim!

Isenção de responsabilidade: estou usando isso para obter uma cópia impressa de uma página da Web com formulários, para que não precise criar uma segunda página. Eu não sou um 1337 haxx0r que quer barras de rolagem vermelhas, <marquee>tags e outros enfeites :-) Não aplique estilo excessivo aos formulários, a menos que você tenha um bom motivo.

Use a pointer-eventspropriedade

A idéia aqui é sobrepor um elemento sobre a seta suspensa nativa (para criar uma personalizada) e, em seguida, não permitir eventos de ponteiro nele. [veja este post ]

Aqui está um FIDDLE de trabalho usando esse método.

Além disso, nesta resposta do SO , discuti esse e outro método com mais detalhes.

Isso funciona (testado no Firefox 23.0.1):

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

com base na resposta de @ JoãoCunha, um estilo css que é útil para mais de um navegador

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

Além da resposta de João Cunha , esse problema está agora na lista de tarefas do Mozilla e está direcionado para a versão 35.

Para aqueles que desejam, aqui está uma solução alternativa de Todd Parker, referenciada no blog de Cunha, que funciona hoje:

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

Desde o Firefox 35, "-moz-appearance:none " que você já escreveu em seu código, remova o botão de seta, conforme desejado.

Foi um bug resolvido desde essa versão.

Muitas discussões acontecem aqui e ali, mas não vejo uma solução adequada para esse problema. Finalmente, acabei escrevendo um pequeno código Jquery + CSS para fazer esse HACK no IE e Firefox.

Calcular a largura do elemento (elemento SELECT) usando o Jquery. Adicione um Wrapper Around Select Element e mantenha o estouro oculto para esse elemento. Verifique se a largura deste invólucro é adequada. 25px menor que o do elemento SELECT. Isso pode ser feito facilmente com o Jquery. Então, agora o nosso ícone foi embora ..! e é hora de adicionar nosso ícone de imagem no elemento SELECT ... !!! Basta adicionar algumas linhas simples para adicionar fundo e você está pronto .. !! Certifique-se de usar o estouro oculto para o invólucro externo,

Aqui está um exemplo de código que foi feito para o Drupal. No entanto, pode ser usado para outros também removendo poucas linhas de código que são específicas do 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;
}

A solução funciona em todos os navegadores IE, Chrome e Firefox Não há necessidade de adicionar Hacks de larguras fixos usando CSS. Tudo está sendo tratado dinamicamente usando JQuery.!

Mais descrito em: - http://northwebstudio.com/blogs/1/jquery/remove-drop-down-arrow-html-select-element-using-jquery-and-css

tente este css

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

Está funcionando

A appearancepropriedade do CSS3 não permite nonevalor. Dê uma olhada na referência W3C . Portanto, o que você está tentando fazer não é válido (na verdade, o Chrome também não deve aceitar).

Infelizmente, não temos realmente nenhuma solução entre navegadores para ocultar essa seta usando CSS puro. Como apontado, você precisará de JavaScript.

Eu sugiro que você considere usar o plugin selectBox jQuery . É muito leve e bem feito.

Você pode aumentar a largura da caixa e mover a seta para mais perto da esquerda da seta. isso permite cobrir a seta com uma div branca vazia.

Dê uma olhada: http://jsbin.com/aniyu4/86/edit

Você aceitaria pequenas alterações no html?

Algo como colocar uma tag div contendo a tag select.

Dê uma olhada.

Ou você pode recortar a seleção. Algo ao longo das linhas de:

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

Isso deve cortar 30px do lado direito da caixa de seleção, afastando a seta. Agora forneça uma imagem de plano de fundo de 170px e voila, com estilo

É um hack enorme, mas -moz-appearance: menulist-textpode fazer o truque.

Eu estava tendo o mesmo problema. É fácil fazê-lo funcionar no FF e no Chrome, mas no IE (8 ou mais que precisamos oferecer suporte) as coisas ficam complicadas. A solução mais fácil que encontrei para elementos de seleção personalizados que funcionam "em todos os lugares que tentei", incluindo o IE8, está usando .customSelect ()

Um truque útil para mim é definir a exibição (seleciona) para inline-flex. Corta a seta do meu botão de seleção. Sem todo o código adicionado.

• Apenas para FX. -webkit appearanceainda é necessário para o Chrome, etc ...

A resposta de Jordan Young é a melhor. Mas se você não pode ou não deseja alterar seu HTML, considere remover a seta para baixo personalizada veiculada no Chrome, Safari etc. e deixar a seta padrão do firefox - mas sem as setas duplas resultantes. Não é o ideal, mas uma boa solução rápida que não adiciona HTML e não compromete sua aparência personalizada em outros navegadores.

<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 ... uma solução que funciona em todos os navegadores que testei (Safari, Firefox, Chrome). Não há IEs por aí, seria bom se você pudesse testar e comentar:

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

CSS, com imagem codificada em 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

Estou usando o: after-element para cobrir a seta feia. Como o select não suporta: depois, preciso de um wrapper para trabalhar. Agora, se você clicar na seta, a lista suspensa não a registrará ... a menos que seu navegador suporte pointer-events: none, o que todos, exceto o IE10- fazem: http://caniuse.com/#feat=pointer-events

Então, para mim, é perfeito - uma solução agradável, limpa e com pouca dor de cabeça, pelo menos em comparação com todas as outras opções que incluem javascript.

tl; dr:

Se os usuários do IE10 (ou inferiores) clicarem na seta, não funcionará. Funciona bem o suficiente para mim ...

Se você não se importa de mexer com JS, escrevi um pequeno plugin jQuery que ajuda você a fazer isso. Com isso, você não precisa se preocupar com prefixos de fornecedores.

 $.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 aqui: JS Fiddle

A condição é que você precise estilizar a seleção do zero (isso significa definir o plano de fundo e a borda), mas provavelmente você deseja fazer isso de qualquer maneira.

Além disso, como a função substitui a seleção original por uma div, você perderá qualquer estilo feito diretamente no seletor de seleção em seu CSS. Portanto, atribua uma classe ao elemento select e denomine a classe.

Suporta navegadores modernos, se você deseja direcionar navegadores mais antigos, tente uma versão mais antiga do jQuery, mas talvez precise substituir on () por bind () na função (não testada)

As outras respostas não pareciam funcionar para mim, mas eu encontrei esse truque. Isso funcionou para mim (julho de 2014)

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

No meu caso, eu também tinha um campo de entrada de woocommerce, então usei esse

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

Atualizei minha resposta para mostrar a seleção em vez da entrada