Remover contorno da caixa de seleção em FF

97

É possível remover a linha pontilhada ao redor de um item selecionado em um elemento selecionado?

texto alternativo

Tentei adicionar a outlinepropriedade no CSS, mas não funcionou, pelo menos não no FF.

<style>
   select { outline:none; }
</style>

Atualizar
Antes de prosseguir e remover o esboço, leia isto.
http://www.outlinenone.com/

Martin
fonte
há três meses, pesquisei a mesma coisa, mas com um botão de opção. Mais de cinco ou seis soluções diferentes que encontrei, nada funcionou. Então, eu suspeito que você não pode fazer isso. Espero estar errado.
Arseni Mourzenko,
Receio que esse seja o fato também, mas ainda espero ser provado que estou errado: D
Martin
Existem realmente seres humanos trabalhando na Mozilla que acham que essa linha pontilhada estúpida parece boa? Por que isso é algo que temos que remover?
billynoah

Respostas:

74

Encontrei uma solução, mas é a mãe de todos os hacks, espero que sirva como ponto de partida para outras soluções mais robustas. A desvantagem (grande demais na minha opinião) é que qualquer navegador que não suporte, text-shadowmas suporte rgba(IE 9) não renderizará o texto a menos que você use uma biblioteca como a Modernizr (não testada, apenas uma teoria).

O Firefox usa a cor do texto para determinar a cor da borda pontilhada. Então diga se você faz ...

select {
  color: rgba(0,0,0,0);
}

O Firefox tornará a borda pontilhada transparente. Mas é claro que seu texto também será transparente! Portanto, devemos de alguma forma exibir o texto. text-shadowvem ao resgate:

select {
  color: rgba(0,0,0,0);
  text-shadow: 0 0 0 #000;
}

Colocamos uma sombra de texto sem deslocamento e sem desfoque, de modo que substitui o texto. É claro que os navegadores mais antigos não entendem nada disso, então devemos fornecer um substituto para a cor:

select {
  color: #000;
  color: rgba(0,0,0,0);
  text-shadow: 0 0 0 #000;
}

É quando o IE9 entra em ação: ele suporta, rgbamas não a sombra de texto, portanto, você obterá uma caixa de seleção aparentemente vazia. Obtenha sua versão do Modernizr com text-shadowdetecção e faça ...

.no-textshadow select {
  color: #000;
}

Aproveitar.

método de ação
fonte
Obrigado cara, vou tentar em breve :)
Martin
A única solução que realmente funciona (usando FF 20). Parabéns!
Gilberto Torrezan
4
Isso deve cuidar de todos os FF e apenas FF:@-moz-document url-prefix() { ::-moz-focus-inner {border: none} select:-moz-focusring { color: transparent; text-shadow: 0px 0px 0px #000; } }
Timo Kähkönen
Isso afetará o css no Chrome e em outros navegadores?
Dadhich Sourav
165

Bem, a resposta de Duopixel é perfeita. Se dermos um passo adiante, podemos torná-lo à prova de balas.

select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}

Pronto, válido apenas para Firefox e o contorno pontilhado feio em torno da opção selecionada desapareceu.

Fleshgrinder
fonte
1
Curiosamente, esta solução não é tão à prova de balas quanto a resposta do Duopixel. Se você usar um efeito de transição com sua caixa de seleção (ou seja, -moz-transição), a caixa pontilhada aparecerá durante a transição e depois desaparecerá. Por exemplo, se você especificar '-moz-transit: all 0.5s facilmente;', você verá a caixa de combinação por meio segundo com esta solução, enquanto você não a veria com a resposta de Duopixel. Você pode contornar isso configurando todo o elemento select para ter um atributo de cor transparente, mas então você não verá nenhum texto quando a caixa não tiver o foco.
Jon
1
Editar: o texto acima deve dizer: "... você verá a caixa pontilhada por meio segundo com esta solução ...". Não consigo mais editar o comentário. De qualquer forma, o 'color: rgba (0,0,0,0);' propriedade é o que corrige a transição e deve estar no elemento select; '-moz-focusring' não serve. Também curiosamente, por algum motivo, não tenho nenhum problema no IE9 e no Chrome com a solução da Duopixel, então as coisas que ele estava falando com a Modernizr eram completamente desnecessárias para mim.
Jon
Claro que aparecerá se você especificar uma transição. Usar allnas transições é como disparar com uma metralhadora Gatling.
Fleshgrinder
1
Esta ou a solução da Duopixel não funciona no FF 33.0.3 no Mac Mavericks. Em vez do contorno pontilhado, há um contorno azul borrado.
Timo Kähkönen
1
isso quebra os estilos do navegador nas opções desabilitadas - uma vez que a seleção em foco, eles se tornam pretos em vez do texto acinzentado que deveriam ser.
billynoah
19

Aqui está uma colaboração de soluções para corrigir problemas de estilo com as caixas de seleção do Firefox. Use este seletor CSS como parte de sua redefinição CSS usual.

A classe remove o contorno de acordo com a pergunta, mas também remove qualquer imagem de fundo (já que normalmente uso uma seta suspensa personalizada e a seta suspensa do sistema Firefoxes não pode ser removida no momento). Se estiver usando a imagem de fundo para qualquer coisa que não seja a imagem suspensa, simplesmente remova a linhabackground-image: none !important;

@-moz-document url-prefix() {
    select, select:-moz-focusring, select::-moz-focus-inner {
       color: transparent !important;
       text-shadow: 0 0 0 #000 !important;
       background-image: none !important;
       border:0;
    }
}
Wayne Dunkley
fonte
Existe alguma maneira de ainda definir a cor do texto da opção usando este método?
user1063287
Na verdade, você pode remover as setas do Firefox usadas no plano de fundo do SELECT, definindo a propriedade específica do fornecedor -moz-appearancecomo none.
Emanuele Del Grande
Outras respostas não têm o select::-moz-focus-innerseletor importante , o que as torna menos eficazes. É por isso que este recebe o meu ⬆.
Dave Land
select:-moz-focusringjunto com color: transparente text-shadow: 0 0 0 #000removida a irritante fronteira em foco no Firefox v63
Jason Moore
Nota: prefixo-url (). fxsitecompat.dev/en-CA/docs/2018/… Lendo os links, não acho claro se eles irão eliminá-lo gradualmente ou não. Mas fique atento.
user3342816
9

Isso terá como alvo todas as versões do firefox

@-moz-document url-prefix() { 
    select {
       color: transparent !important;
       text-shadow: 0 0 0 #000 !important;
    }
}

Você pode remover o! Important, se planeja que o esboço apareça em outras páginas do seu site que usem a mesma folha de estilo.

Kyzer
fonte
1
Esta deve ser a resposta selecionada
brandonscript
9

Em geral, os controles de formulário são impossíveis de estilizar com esse grau de precisão. Não tenho conhecimento de nenhum navegador que ofereça suporte a uma gama razoável de propriedades em todos os controles. Essa é a razão pela qual existem zilhões de bibliotecas JavaScript que "falsificam" controles de formulário com imagens e outros elementos HTML e emulam sua funcionalidade original com código:

http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

...

Álvaro González
fonte
Thx, acho que tenho que "fazer minha própria" lista de seleção para fazer isso. Uma pena que os controles de formulário não são mais uniformes entre os navegadores.
Martin,
1
@ Martin: isto não é nada comparar com a inflexibilidade de um controle de upload de arquivos, o que não pode ser denominado em tudo na maioria dos navegadores. ;)
Arseni Mourzenko,
3

<select onchange="this.blur();">

Se você usar isso, a borda permanecerá até que você selecione um item da lista.

malitta
fonte
2
Infelizmente, esta solução não respeita as diretrizes de acessibilidade e usabilidade. Além das interfaces TTS para usuários cegos, ele não permite a navegação pelo teclado. Os elementos focados devem ser diferentes dos outros, o problema da questão atual é que o Firefox não permite que você decida como.
Emanuele Del Grande
1

Experimente um destes:

a:active {
 outline: none;
 -moz-outline: none;
}

a {
-moz-user-focus: none;
}

Referência

Peixe-gato
fonte
6
Obrigado pelo esforço, mas infelizmente não funcionou. Talvez funcione em um aelemento, mas não funcionou em um selectelemento.
Martin,
1

Aí vem a solução

:focus {outline:none;}
::-moz-focus-inner {border:0;}
Faizan
fonte
1
Testado. Não funciona. O Firefox reconhece esta propriedade, mas não parece fazer nada. Tentei configurá-lo 10px solid rede não consigo encontrar onde ele aparece.
maio de
Isso realmente funcionou para mim quando todas as outras respostas com maior votação não funcionaram.
Tashows de
0

Remova contorno / borda pontilhada de todas as tags selecionáveis ​​do Firefox.

Coloque esta linha de código em sua folha de estilo:

*:focus{outline:none !important;}   
Hasnain Mehmood
fonte
0

Adicione border-style: none à sua seleção em CSS.

select {
border-style: none; }
Khwaja Abdul Ahad
fonte
-2
    input[type='range']::-moz-focus-outer {
    border: 0;
    outline: none !important;
    }

trabalhando 100%

user2577904
fonte
-4

Isso removerá o foco do selectelemento e do contorno :

$("select").click(function(){
    $(this).blur();
});

Embora isso não seja isento de falhas em outros navegadores. Você deve verificar o navegador que o usuário está usando:

if (FIREFOX) {
    //implement the code
}
Moses Dike Okore
fonte
Explique o que o seu snippet de código faz além de fornecer o snippet de código.
sayan