Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

CSS Reset - checkbox e select

O curso "HTML5 e CSS3 I" apresenta o papel do reset no css.

Porém, mesmo utilizando essa técnica, os navegadores exibem de formas diferentes algumas coisas, como os campos checkbox e select. (Seja reset.css ou normalize.css)

Exemplo: o campo checkbox no chrome tem fundo cinza escuro e bordas arredondadas, no firefox o mesmo campo tem fundo branco e bordas quadradas.

Existe uma forma de "resetar" isso?

2 respostas

Fala, Victor!

Nesse caso são implementações do navegador. Para mudar, você terá que aplicar o reset e, então, setar as coisas como você quer: fundo branco, cor de fonte cinza, tamanho da fonte, cor das bordas, etc.

solução!

A idéia não é resetar o CSS para depois estilizá-lo, porque não é possível estilizar esses componentes de formulário como gostaríamos. Uma técnica possível é substituir a apresentação do elemento por outra criada e estilizado por nós. Ocultando o checkbox, neste caso, e usando o label para manter o comportamento do checkbox. Adicionando ao conjunto alguns envoltórios, podemos estilizá-los como quisermos.. No link a seguir, um exemplo que fiz:

http://codepen.io/evandrosevergnini/pen/XNeoeV?editors=1100