Skip to main content
adicionou 4 caracteres ao conteúdo
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361

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

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.

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.

removeu 161 caracteres do conteúdo
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361
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>
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.form-control, select.form-control:focus {
    outline: 0;
}
<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, até mesmoao 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;
}

select.form-control
{
    text-shadow: 0 0 0 #000;
    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>
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>
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.form-control, select.form-control:focus {
    outline: 0;
}
<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, até mesmo com navegação via Tab teve o efeito desejado:

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

select.form-control
{
    text-shadow: 0 0 0 #000;
    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>
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>
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;
}

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>
adicionou 39 caracteres ao conteúdo
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361

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

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

Clique abaixo para testar:para testar:

Clique abaixo para testar:para testar:

Clique abaixo para testar:para testar:

Conforme exemplo da outra pergunta no Windows:

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

Clique abaixo para testar:

Clique abaixo para testar:

Clique abaixo para testar:

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

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

Clique abaixo para testar:

Clique abaixo para testar:

Clique abaixo para testar:

adicionou 36 caracteres ao conteúdo
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361
Carregando
exemplos corrigidos
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361
Carregando
adicionou 100 caracteres ao conteúdo
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361
Carregando
adicionou 2371 caracteres ao conteúdo
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361
Carregando
adicionou 157 caracteres ao conteúdo
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361
Carregando
adicionou 175 caracteres ao conteúdo
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361
Carregando
adicionou 4 caracteres ao conteúdo
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361
Carregando
adicionou 40 caracteres ao conteúdo
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361
Carregando
adicionou 307 caracteres ao conteúdo
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361
Carregando
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361
Carregando