3

Mais uma vez acabo de perceber que o Firefox está colocando "estilizações adicionais" nos meus inputs.

Dessa vez, no <select>, quando eu clico em cima dele pra selecionar uma opção, sempre aparece um tracejado interno:

Tracejado no input do firefox

Tracejado no input do firefox

Isso é algo que acontece especificamente no Firefox. Tem como remover esses tracinhos que estão aparecendo quando seleciono o <select>?

3 Respostas 3

5

No Windows isso não ocorre, ao menos não no Firefox, estou quase certo de que isto é uma situação que ocorre no Ubuntu ou no ambiente gráfico especifico, pois os controles renderizados no navegador são "parcialmente" gerados a partir do "sistema operacional" o que provavelmente não permitirá uma customização total.

Conforme exemplo da outra pergunta no Windows, para testar clique em:

.form-control
{
    background-color: #fff;
    border-radius: 15px;
    border: 2px solid #ccc;
    font-size: 16px;
    margin-top: 5px;
    min-height: 57px;
    outline: none;
    padding: 15px 10px;
    transition: border-color .1s linear;
    width: 100%;
    box-sizing: border-box;
 }

 select.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
         appearance: none; /*provavelmente será implementado no futuro*/

    background: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMzA2cHgiIGhlaWdodD0iMzA2cHgiIHZpZXdCb3g9IjAgMCAzMDYgMzA2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzMDYgMzA2OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PGc+PHBvbHlnb24gcG9pbnRzPSIyNzAuMyw1OC42NSAxNTMsMTc1Ljk1IDM1LjcsNTguNjUgMCw5NC4zNSAxNTMsMjQ3LjM1IDMwNiw5NC4zNSIvPjwvZz48L3N2Zz4=) center right no-repeat;

   background-size: 8px 8px;
}
<select class="form-control">
<option>Selecione...</option>
<option>Masculino</option>
<option>Feminino</option>
</select>

O resultado no Firefox em Windows foi:

firefox

Nota: No Windows o único momento que foi mostrado o pontilhado foi quando usei o Tab para navegar


Técnicas para remover o "outline" no Firefox

Nota: É bem provável que essas técnicas funcionem melhor quando aplicada para links como: <a href="...">foo bar</a>

Você pode experimentar o:

select.form-control, select.form-control:focus {
    outline: 0;
}

Clique abaixo para testar:

select.form-control
{
    background-color: #fff;
    border: 2px solid #ccc;
    padding: 15px 10px;
    width: 100%;
}

select.form-control, select.form-control:focus {
    outline: 0;
}
<select class="form-control">
<option>Selecione...</option>
<option>Masculino</option>
<option>Feminino</option>
</select>


Ou moz-focusring com "algum" efeito:

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

Clique abaixo para testar:

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

select.form-control
{
    background-color: #fff;
    border: 2px solid #ccc;
    padding: 15px 10px;
    width: 100%;
}
<select class="form-control">
<option>Selecione...</option>
<option>Masculino</option>
<option>Feminino</option>
</select>


Ou o seletor -moz-focus-inner, este foi o que funcionou melhor, ao menos com navegação via Tab teve o efeito desejado, no entanto no Debian com Lxde não funcionou:

select.form-control::-moz-focus-inner {
    border: 0;
}

Clique abaixo para testar:

select.form-control::-moz-focus-inner {
    border: 0;
}

select.form-control
{
    background-color: #fff;
    border: 2px solid #ccc;
    padding: 15px 10px;
    width: 100%;
}
<select class="form-control">
<option>Selecione...</option>
<option>Masculino</option>
<option>Feminino</option>
</select>


Concluindo

Ou seja creio eu não que não exista técnica garantida, pois depende do sistema operacional, mesmo técnicas como moz-focusring poderão não chegar ao resultado desejado ou causar até outro efeito em diferentes sistemas operacionais, pois não é possível customizar por por completo.

Leve em consideração que esse pontilhado pode até ajudar o usuário e não incomoda tanto.

10
  • Se liga no bagulho: i.sstatic.net/JfeUb.png Commented 25/10/2017 às 17:21
  • @WallaceMaxters editei a resposta
    – Syzoth
    Commented 25/10/2017 às 17:35
  • @WallaceMaxters editei novamente a resposta, teste todos exemplos em "Técnicas para remover o "outline" no Firefox", creio que o select.form-control::-moz-focus-inner { border: 0; } será o que irá chegar mais perto.
    – Syzoth
    Commented 25/10/2017 às 19:28
  • 1
    @WallaceMaxters sim, no Debian também ocorre, só o hack com text-shadow "resolveu", como descrevi na resposta nenhuma técnica é 100% garantida. Mas ainda estou fazendo testes e lendo algumas coisas na comunidade Mozilla
    – Syzoth
    Commented 26/10/2017 às 12:10
  • 1
    @WallaceMaxters > Leve em consideração que esse pontilhado pode até ajudar o usuário e não incomoda tanto, já que só ocorre no momento do foco.
    – Syzoth
    Commented 26/10/2017 às 12:16
3

Esse estilo pode resolver alguns comportamentos padrão:

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

No OS não aconteceu o mesmo problema, nem no Firefox.

8
  • Esse caso parece ter amenizado um pouco do problema. Commented 25/10/2017 às 17:24
  • Foi você quem deu o downvote na minha resposta? Não tenho nada contra, mas poderia justificar? Fico agradecido, só gostaria de saber aonde falhei.
    – Syzoth
    Commented 1/11/2017 às 18:32
  • Não foi. Por que seria @GuilhermeNascimento ?
    – BrTkCa
    Commented 1/11/2017 às 19:27
  • @LucasCosta também não sei, gostaria de saber a motivação apenas. Obrigado por responder. PS: bonito Mac, é "retina"?
    – Syzoth
    Commented 1/11/2017 às 19:29
  • Tudo bem, de vez em quando recebo alguns downvotes anonimos. Pra ser honesto eu acho que deveria ser obrigatorio deixar um comentario apos o downvote.
    – BrTkCa
    Commented 1/11/2017 às 19:32
3

Ja existe uma resposta dizendo algo parecido, mas complementando:

.form-control-border {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857;
  color: #555555;
  border-color: #fff;
    }
.form-control-bg {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857;
  color: #555555;
  background-color: #fff;
    }
.form-control-moz {
 
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  
  font-size: 14px;
  line-height: 1.42857;
  color: #555555;
  
  background-color: -moz-Combobox;
  color: -moz-ComboboxText;
  padding: 0;
  -moz-appearance: menulist;
}
.form-control-n{
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  
  font-size: 14px;
  line-height: 1.42857;
  color: #555555;
}
<select class='form-control-border'>
  <option>a</option>
  <option>b</option>
  <option>c</option>
</select>

<select class='form-control-bg'>
 <option>a</option>
  <option>b</option>
  <option>c</option>
</select>

<select class='form-control-moz'>
 <option>a</option>
  <option>b</option>
  <option>c</option>
</select>

<select class='form-control-n'>
  <option>a</option>
  <option>b</option>
  <option>c</option>
</select>

Repare que ao adicionar qualquer estilo de borda e background sobre um select, o pontilhado interno aparece no momento do focus.

1 - Veja que no select de classname '.form-control-n' não há borda pontilhada em focus.

2 - No '.form-control-moz' o pontilhado foi para as pontas.

3 - E nos demais onde há modificação da propriedade background e border ha o pontilhado no meio.

Isso ocore porque dentro de background-color há um estilo do firefox -moz-Combobox e também um estilo chamado '-moz-appearance: menulist', que, a conclusão que cheguei foi que esses dois estilos são responsáveis por gerar esse tracejado.

Não consegui sobrepor esses estilos de forma nenhuma, caso consiga atualizo a resposta.

Ambiente de teste:

Ubuntu 16.04 
Firefox Quantun.
1
  • Foi você quem deu o downvote na minha resposta? Não tenho nada contra, mas poderia justificar? Fico agradecido, só gostaria de saber aonde falhei.
    – Syzoth
    Commented 1/11/2017 às 18:32

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .