[Resolvido] Estlizar OPTGROUP e OPTION...

[Bruno Augusto 417]

É possível estilizar elementos OPTGROUP e OPTION sem que tais estilos afetem a opção selecionada?

 

Ou, talvez, estilizar a opção selecionada de forma diferente do restante?

 

Pergunto pois:

 

<dl>    
   <dt><label for="base">Base</label></dt>

   <dd>
       <select name="base" id="base" class="dropdown">

           <option value="none" selected="selected">Type</option>

           <optgroup label="Category">

               <option value="Ruby pendant">Ruby pendant</option>

           </optgroup>
   </dd>
</dl>

Estilizado, depois de muitas combinações, com:

 

optgroup {
   font-size: 110%;
   font-style: normal;
   padding: 1px 10px 1px 10px;
}

option {
   font-weight: normal;
   padding: 4px 0 4px 10px;
}

Me renderiza um menu agradável de ser ver, com as opções mais espaçadas.

 

Porém, a opção selecionada parece não ser afetada pelo espaçamento adicional, ou funciona "pela metade", já que o padding superior parece ser ignorado e o texto interno, verticalmente desalinhado.

 

Eu até consigo reproduzir o alinhamento através do espaçamento, adicionando o padding na classe .dropdown que, até então, continha apenas um width.

 

Porém esse workaround me trás um revés desagradável. Ao menos no Firefox, que estou testando atualmente, esse espaçamento a mais no dropdown em si faz com que, ao clicar na setinha de abrir o menu fique sem a borda esquerda padrão do browser, assim:

 

 

Daí fica estranho.

[Evandro Oliveira 331]

Bruno, estilização de formulários sempre foi um assunto controverso. Se você altera o estilo de um elemento, por exemplo, jamais conseguirá fazer com que ele tome a aparência padrão. Em testes que eu fiz, apenas a fonte de <option>'s foi estilizável e só testei no Windows. Recomendo que utilize, neste caso, uma solução em Javascript. Se seu alvo for apenas navegadores modernos e se tratar de uma modificação não obrigatória, creio que o pseudo-elemento ::selection das CSS3 resolva o seu problema.

[Bruno Augusto 417]

Pois é, eu sabia que o campo de upload era inflexível, mas quando pesquisei a fundo as particularidades de cada elemento vi que o buraco é bem mais embaixo.

 

Bom, depois de várias tentativas eu consegui solucionar, e fica a dica para quem tiver esse problema.

 

Boa parte foi falta de atenção no uso correto das propriedades para aquilo que elas foram feitas. Oras, padding é para controlar espaçamento e não definir altura, coisa que eu estava tentando fazer em paralelo (deixá-los mais largos).

 

Resumindo: Setei um height na altura que eu queria e controlei o alinhamento vertical com padding, já que vertical-align não rola, line-height parece não existir para esses elementos e margin faz com que a cor de hover sobre dado OPTION fique estranha.

 

Mesmo assim, a opção selecionada ficou desalinhada e o que acabei descobrindo por mim mesmo foi que o mesmo "truque" de alinhamento feito nos OPTION's deveria ser feito em seu pai, a tag SELECT, para que a primeira opção ficasse certa também.

 

E depois, lendo sobre as diversas formas que diferentes browsers renderizam um menu, simplesmente adicionei uma borda de cor sólida à o meu e o probleminha da imagem sumiu. Até mesmo no IEca (pelo menos versão 9)

 

Agora, já que ainda estamos falando de estilizar um OPTION, dá pra tirar essas porcarias de pontinhos que aparecem quando se abre e escolhe alguma opção?

[Evandro Oliveira 331]

O nome da propriedade é outline. Pessoalmente, nunca tentei.

select, option { outline: none; }

[Bruno Augusto 417]

Já tentei esses mais simples como outros mais complexos, montados com pseudo-classes comuns assim como pseudo-classes específicas para o Mozilla e nada.

 

Acho que vai ter de ficar assim mesmo. Vou tentar enforcar meu perfeccionismo :lol: