O Firefox ignora as configurações em userContent.css (às vezes)

Question

Eu tenho o seguinte código no meu $HOME/.mozilla/firefox/XXXXXXXX.default/chrome/userContent.css :

input, textarea {
color:#000  !important;
background-color: rgb(255, 255, 255) !important;
}

O objetivo é ter campos de entrada e áreas de texto sempre preto na cor branca. Meu tema da área de trabalho é escuro e, sem esse truque, o firefox exibia texto preto na entrada e na área de texto em um backround cinza escuro, o que é praticamente ilegível.

Isso funciona bem para a maioria dos sites, mas alguns sites ainda são exibidos como antes (texto em preto sobre fundo cinza). Por exemplo, este site .

Eu instalei dom inspector e verifiquei que o elemento é do tipo input . Mas por que então minhas configurações de css são ignoradas para este site?

SUBQUESTA:

Existe alguma documentação / manual, onde essas opções de configuração são explicadas? ou seja, como eu sei que a palavra-chave é background-color e não background ? Além disso, o que mais posso configurar além de input e textarea ?

    

Answer 1

O problema é que as caixas de entrada são processadas de forma padrão pelo sistema operacional, não pelas folhas de estilo css. Você pode desabilitar isso por uma propriedade CSS não padrão específica do Gecko chamada -moz-appearance . Use assim:

input, textarea {
  color:#000  !important;
  background-color: rgb(255, 255, 255) !important;
  -moz-appearance: none !important;
}

Agora, todas as suas caixas de entrada são renderizadas por CSS.

SUBQUESÇÕES:

Is there some documentation/manual, where these configuration options are explained?

• Rede de desenvolvedores da Mozilla: -moz-appearance

What else can I configure other than input and textarea ?

Tudo , você quer, há também outro arquivo chamado userChrome.css (na mesma pasta) onde você pode personalizar a aparência da interface do usuário.

How do I know the keyword is background-color and not background?

• background-color : define a cor de fundo de um elemento. Exemplos:

  background-color:red;
  background-color:#0000FF;
  background-color:rgb(255,0,255);
  

• background : define todas as propriedades de segundo plano em uma declaração. Exemplos:

  background: #FF0000 url('blah.jpg') no-repeat fixed center;