Elementos de formulário são alguns dos elementos HTML mais difíceis ao estilo; cada navegador e sistema operacional tem sua própria idéia de como estes elementos deve olhar, e esses padrões são difíceis (se não impossível) para substituir.

O elemento <select> é talvez o mais notoriamente teimoso, e sua aparência variada em todos os navegadores podem interromper a consistência de um projeto. Em um projeto recente, tentei resolver esse problema usando vários plug-ins jQuery, apenas para encontrá-los inflexível e inchado. Depois de alguma reflexão, percebi que o efeito que eu estava apontando para realmente não era tão complicado: Eu queria preservar a funcionalidade nativa do navegador através de dispositivos, ao personalizar a aparência do menu quando não focado.

Para conseguir isso, o que precisamos fazer é criar o nosso próprio elemento para exibir a opção selecionada, sem se livrar do original. O primeiro passo é fazer com que o elemento select invisível (sem realmente removê-lo). Precisamos usar o seguinte CSS para se livrar de todos os estilos padrão do navegador:

select {
border: none;
background:
none; outline:
none; opacity: 0;
-webkit-appearance: none;
filter: alpha(opacity=0);
}

Marcador:

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *