Este não é um protocolo muito bom, mas pode economizar muito tempo.
No Safari e no Chrome (e, pelo que me lembro, nas versões recentes do IE), pode-se definir o estilo de botões de rádio, caixas de seleção e selecionar menus por meio de seus seletores usuais. É uma maneira realmente simples e elegante de personalizar os controles de formulário.
No entanto, é impossível estilizar completamente qualquer um dos controles de formulário acima no Firefox, mesmo se você incluir -moz-appearance: none;, o que deve neutralizar qualquer um dos estilos padrão. Isso se deve a dois bugs:
- 649849 tem um ano de idade e ninguém está trabalhando nisso.
- 418833 tem mais de quatro anos e ninguém está trabalhando nisso.
Os botões de opção e as caixas de seleção podem ser estilizados principalmente, exceto quando estão no checkedestado – eles adotarão o ponto preto ou a marca de seleção padrão.
Menus selecionados são ainda piores. O Firefox desenha um fundo Aqua falso no Mac (e provavelmente um Aero igualmente falso no Windows), de modo que esse fundo permanecerá se você não incluir -moz-appearance: none;. Se você não incluir isso no seu CSS, seus estilos será aplicada em todos os lugares, exceto o botão de seta drop, que recebe um botão chanfrado cinza 95-esque do Windows. É muito ruim.
Existem três “soluções” possíveis para isso:
- Defina o estilo dos controles de formulário e deixe o Firefox desenhá-los da melhor maneira possível.
- Implemente algum feitiço javascript customizado para substituir os controles por
divs espans que se parecem e se comportam como controles de formulário, mas passam suas instruções para as caixas de seleção, botões de rádio e menus de seleção reais. - Desista dos controles personalizados.
O Bootstrap escolhe a opção # 2. A maioria dos desenvolvedores que conheço escolhe a opção # 3. Se você tem um público de ponta, provavelmente está seguro com o número 1.
Edit: Poeticamente, em uma entrada sobre bugs de estilo, CoderWall tem problemas com código embutido nas listas.