Como remover a seta de um elemento selecionado no Firefox


172

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


3
Existe um relatório de bug sobre isso agora: bugzilla.mozilla.org/show_bug.cgi?id=649849 #
sneilan

3
Escolhida é uma biblioteca JavaScript que estiliza suas seleções para você e as faz parecer realmente sofisticadas. Pode valer a pena investigar, embora provavelmente não resolva o seu problema.
stephenmurdoch

Você pode encontrar este post útil: red-team-design.com/making-html-dropdowns-not-suck
Rui Marques

1
Parece que eles adicionaram a -moz-appearancepropriedade CSS3, estou usando -moz-appearance: none;e parece estar funcionando na versão 35.0.1.
Tony M

Uma correção simples seria tornar o elemento de seleção mais largo que o contêiner. E envolva um prefixo de URL do mozilla para que as opções sejam mais amplas no Firefox. @-moz-document url-prefix() { select { width: 105%; overflow: hidden; } }
Luke Femur

Respostas:


78

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.


2
E após 2 anos, esta é a melhor resposta que foi publicada para alcançar o resultado desejado. Coloquei uma JSBin do código aqui: jsbin.com/aniyu4/2440/edit para outras pessoas verem e fiz apenas uma pequena atualização CSS. O intervalo foi maior do que o selecionado no FF, devido ao preenchimento correto - isso significava que clicar na seta não ativava o menu suspenso. Para ajustar isso, coloquei uma margem direita negativa no elemento de seleção para puxar a largura do vão de volta, para sobrepor a largura da seleção.
RussellUresti

Ah, claro! Muito obrigado, Russell. Realmente feliz que isso ajudou.
Jordan Young

5
Não funcionou para mim no FF 23-24 no Windows (tentei o jsbin no comentário). Acabou usando esta solução alternativa stackoverflow.com/questions/6787667/…
Esteban,

4
Não funciona mais no FF 30. Por favor, vá em frente e envie um ticket no site da Mozilla: bugzilla.mozilla.org/show_bug.cgi?id=649849 . Quanto mais as pessoas se queixam disso, maior a chance que temos deles de consertá-lo.
Stan

1
Funciona apenas no FF 31 no Mac.
Erwin Wessels

165

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


1
Eu tenho um lugar especial no meu coração geralmente frio para correções de hackers como esta. É bastante brilhante. A única desvantagem é que o FF deixa um espaço no final da área de texto suspensa (entre o texto real e o final da caixa de seleção), o que cria um espaçamento inconsistente entre o FF e os outros navegadores, mas isso é apenas um pequeno problema. Bom achado.
RussellUresti

Boa captura, @RussellUresti. Mas considerando que toda a idéia pode ser fornecer uma seta modificada, o espaço realmente se mostra útil. Eu brinquei um pouco com ele e adicionei padding-right:10px;à <select>vontade "empurrar" a seta agora invisível para a esquerda. Bottomline: Firefox oculta a flecha, o Chrome a remove. Atualizarei meus escritos de acordo, obrigado por isso.
João Cunha

Eu adicionei um pouco de crossbrowser (não testei em versões antigas do IE) como uma resposta para que você pode atualizar o seu
Daniël Tulp

2
Melhor solução para mim, como -moz-appearence: windownão funciona com fundos transparentes (desenhar uma bg feia no lugar, pelo menos no firefox linux)
kik

Como isso remove completamente a seta, a <seleção> resultante parece uma caixa de texto e é bastante feia. Então você pode adicionar uma imagem de fundo para trás para fazer com que pareça um menu suspenso: codepen.io/anon/pen/nvfCq
thom_nic

59

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/


6
Isso não tem efeito para mim. FF 6.0.2
Charlie Schliesser

1
Boa solução para o IE também. Na minha solução, defino o elemento div que contém para overflow: hidden e depois ampliei a largura do select. Funciona bem.
Mike

@ Charlie S: tente colocar o estouro: oculto na div que contém. Funciona para mim com taht
PierrOz

1
quando você expande a lista suspensa, o estouro: oculto não funciona
Marc

Funciona bem para mim. Isso torna a lista suspensa um pouco mais larga que a parte superior, mas esse é um preço que estou disposto a pagar.
Jimbali

26

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>


20

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.


6
Não é uma solução ruim e é semelhante a um padrão que eu já vi para estilizar o elemento de entrada de upload de arquivo, mas há várias desvantagens. Primeiro, ele depende do JS, o que não é o ideal. Segundo, se o formulário tiver um botão de redefinição, você também precisará script dessa funcionalidade (agora, o JS apenas escuta o clique do elemento select, mas não responde a um evento form.reset). Substituir o elemento select por uma div funcionará, mas, idealmente, poderíamos apenas estilizar a aparência dos elementos do formulário. Também existem problemas de acessibilidade relacionados ao JS e ao comportamento do formulário padrão.
RussellUresti

14

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


6

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.


Sim, eu notei que windowtinha esse efeito, infelizmente, eu precisava definir a imagem de fundo. É lamentável que isso não seja muito bom no Firefox.
RussellUresti

É lamentável que você não possa aplicar uma redefinição completa para formar elementos. Você sempre pode falsificar o plano de fundo tendo um elemento abaixo da <seleção>, o que não é ideal, é claro.
Stuart Badminton

1
Isso é PERFEITO para impressão! Basta definir um media="print"bloco de css com select {-moz-appearance: window;}e irá remover setas e fundos de todos os seleciona na FF (para outros navegadores tentar aparência ou -webkit-aparência) para que eles se parecem com texto simples ou títulos
FrancescoMM

4

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!


2
Os links para recursos externos são incentivados, mas adicione contexto ao redor do link para que seus colegas usuários tenham uma idéia do que é e por que está lá. Sempre cite a parte mais relevante de um link importante, caso o site de destino esteja inacessível ou fique permanentemente offline.
Andrew Stubbs

Obrigado por sugere! Desculpe pelas minhas falhas!
ferocesalatino 23/07

Obrigado por editar sua pergunta, no entanto, ela ainda não responde à pergunta sozinha . Copie as partes desses links que ajudarão o interlocutor de forma que eles possam resolver o problema apenas lendo sua resposta.
Andrew Stubbs

2

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


8
Eu discordo que isso é algo chique, embora seja algo experimental. O objetivo da appearancepropriedade é fornecer aos desenvolvedores controle sobre a aparência dos elementos do formulário, porque o uso de JavaScript é uma solução horrível. Os navegadores não devem tomar a decisão sobre a aparência de algo em uma página - é uma decisão UX, não uma decisão do fornecedor do navegador. Infelizmente, ainda não está bem suportado. Talvez em mais um ano.
51111 Russell 15:32

Não considero "sofisticado" se eu quiser que, quando você imprimir a página, todas as seleções pareçam um campo sem setas. E essa deve ser a minha escolha, não o navegador ou a opção OS. Eu tenho uma seleção com meses e, quando a página é impressa, tenho um CSS especial para impressão que remove a seta na página impressa, para que pareça com um título "Março" sem setas que não fazem sentido em uma página adequada.
FrancescoMM

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

20 para sugerindo usando um elemento pseudo
Zach Saucier

2

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


1

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.


3
-moz-appearance: normalnão parece ser uma opção válida no Fx 9 e -moz-appearance: none(que é válido) não remove a seta para baixo.
precisa saber é o seguinte

Sua solução de extensão sobreposta funciona no IE e no FF, mas não no Chrome.
corvo vulcan

Os pseudoelementos: before e: after funcionam apenas em elementos que aceitam conteúdo interno. Esse não é o caso do select, nem da entrada, nem do fileuploader, etc. Eles são ótimos para divs, links, parágrafos, etc. CONTEÚDO. E um elemento select não suporta algo parecido <select> hi.
João Cunha

1

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.


1

Isso funciona (testado no Firefox 23.0.1):

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

Funcionou para mim, mas não gostei de radio-containervalor para um objeto selecionado. Navegar -moz-appearance referência mozilla para obter um valor adequado (eu usei menulist-textque esconde a selecione da seta na FF 31)
sglessard

1

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

1

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

1

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.


1

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


1

tente este css

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

Está funcionando


0

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.


1
Mas noneÉ um valor que o Firefox alega apoiar: developer.mozilla.org/en/CSS/-moz-appearance Embora o estilo de elementos de formulário, no passado, só fosse possível através de JavaScript, o objetivo principal da appearancepropriedade é se afastar a partir desse. Os fornecedores de navegadores não devem tomar decisões UX para os desenvolvedores. Infelizmente, parece que isso ainda é um pouco novo demais para ser usado com eficácia.
51111 Russell 15:32

1
@RussellUresti, portanto, mesmo que a descrição do prefixo do fornecedor -mozaceite none(mesmo se isso funcionou) não seria correto usá-lo. Ainda mais em relação a um navegador como o Firefox, que sempre se gabou de seguir exatamente os padrões.
Erick Petrucelli



0

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


0

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


Este parecia remover a seta de seleção para mim, mas como @dendini observou, também removido todas as outras styling no elemento
codestr

0

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 ()


0

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

2
Não parece ter qualquer efeito
Chris Nicola

0

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

0

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


0

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)


-2

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


input.input-text? o que isso tem a ver com a opção select e a pergunta feita?
Dendini
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.