0

inserir a descrição da imagem aqui

Conforme a foto anterior mostra, eu gostaria de estilizar aquele local que está demarcado em vermelho.

Ja coloquei o seguinte código:

select option {
    background-color: white;
    border: 1px dashed red;
}

O background-color funcionou, porém o atributo border não funcionou e varios outros atributos também não funcionaram. Eu gostaria de estilizar um <select> de forma parecida com o <select class="selectpicker"> do Bootstrap, porém os atributos que eu coloco não são reconhecidos (parece). Alguém saberia porque não estão funcionando/sendo reconhecidos?

Obrigado!

3 Respostas 3

1

Como foi dito existe um limite até onde você poderá customizar o SELECT, mas pra casos como esse existe o Bootstrap. Recomento da uma lida na documentação deles Introduction.

Segue um pequeno exemplo que modifiquei:

Customizando o Select com o Bootstrap

Pra fazer rodar você irá precisar dos arquivos do Bootstrap que se encontrão na aba External Resources no site desse link.

0

É quase impossível estilizar options de forma livre, cada navegador entende sua estilização de forma diferente, além disso ele aceita poucas propriedades de estilo, a solução adotada por frameworks de UI como...

mdBooststrap select menus

Jquery UI select menus

É a substituição dos selects para ul´s e li´s após o carregamento da página, mantendo a função do mesmo em formulários.

Também pode ser feito manualmente com chosen

0

Existem muitas limitações com a estilização de select, entretanto você pode brincar com as propriedades.

Pra alterar a borda use o outline, não o border.

Se quiser ter mais liberdade, como mudar o hover de option, vai ter que usar alguma library como select2 ou choosen.

Demo

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .