Tornar mais óbvio para dizer qual elemento está em foco quando tab através dos elementos

Question

No Firefox, há uma borda pontilhada em torno de um elemento quando ele está em foco. Eu acho isso impossível de ver às vezes. O que, se houver, a configuração do Firefox podemos usar para tornar o foco mais óbvio.

Observe que quero fazer isso por meio de uma configuração do Firefox NÃO editando o CSS de um site.

Por exemplo, no Superusuário, quando os botões Dúvidas, Tags, Usuários, Emblemas ou Não Respondidos estão em foco, a borda pontilhada fica completamente invisível. Como posso fazer a fronteira, digamos, trazer rosa ou vermelho e 5px de largura?

Atualmente, o link Perguntas está em foco. Não há como saber se está em foco no esquema de cores do site.

Euprefeririaquefosseassimquandoemfoco,alterandoalgumasconfiguraçõesdoFirefox.

    

Answer 1

Você pode definir seus próprios estilos padrão adicionando-os ao < diretório de perfis do Firefox > \ chrome \ usercontent.css . Qualquer alteração que você fizer entrará em vigor na próxima vez que você iniciar o perfil (por isso, se você estiver usando no momento em que editar o arquivo, será necessário reiniciar).

Adicionando o seguinte ao usercontent.css do meu perfil:

:focus {
  outline: #FF5500 dashed 2px;
}

Eu recebo o seguinte:

Algumas notas:

• usercontent.css define apenas os estilos padrão usados quando não há estilos conflitantes definidos na página da web. Então, isso funciona nos casos em que a estrutura de foco é oculta por razões incidentais (como o uso de imagens de botão, como nesta página), mas não funcionará se o autor do site tiver deliberadamente definido um Estilo CSS que desativa o contorno de foco, seja para um determinado elemento ou para toda a página da web. É amplamente considerado uma má prática desativar o esboço de foco sem definir um meio alternativo de distinguir o elemento focalizado, mas infelizmente é muito comum.

• Se você não vir um subdiretório chrome no diretório do perfil e / ou não vir um arquivo usercontent.css nesse subdiretório, basta criá-los.

• Você pode encontrar o diretório do perfil inserindo about:support na barra de endereço (ou selecionando Informações para solução de problemas no menu Ajuda ) e, em seguida, clicando no < Botão kbd> Mostrar pasta na seção Princípios básicos do aplicativo .

Answer 2

Você pode usar Elegante para definir um estilo de foco diferente. Algo parecido com isto:

:focus {
    outline: 3px solid red;
}

O resultado seria assim: