Como faço para estilizar a tag select
, como aquela seta que fica no final do campo. As pseudo-classes :hover
, :focus
, funcionam com este elemento?
3 Respostas
Experimente isso:
<style>
.select-estiloso { /* <div> */
width: 240px;
height: 34px;
overflow: hidden;
background: url(nova_setinha.jpg) no-repeat right #ddd; /* novo ícone para o <select> */
border: 1px solid #ccc;
}
.select-estiloso select { /* <select> */
background: transparent; /* importante para exibir o novo ícone */
width: 268px;
padding: 5px;
font-size: 16px;
line-height: 1;
border: 0;
border-radius: 0;
height: 34px;
-webkit-appearance: none;
}
</style>
<div class="select-estiloso">
<select>
<option>Aqui a primeira opção</option>
<option>E aqui a segunda opção</option>
</select>
</div>
Resultado:
Exemplo no Fiddle com as Pseudo-Classes
As pseudo-classes no geral funcionam igual para a maioria dos elementos e sim funciona com o elemento .
Pseudo-classes dinâmicas controlam os estados dos elementos. Abaixo, vão alguns deles:
:hover – quando passamos o mouse em cima do elemento.
:active – quando ativamos o elemento. Por exemplo, quando clicamos em um link e não soltamos o botão do mouse. Nesse momento, estamos ativando a ação do elemento. Esse estado é ativado também quando navegamos pelos links pelo teclado utilizando o TAB. Este estado não há em todos os elementos.
:visited – quando o link é visitado.
:focus – quando um elemento recebe foco. Muito utilizado em campos de texto. Quando clicamos em cima um campo de texto para escrever, o elemento está ganhando foco.
Pseudo-classes estruturais servem para selecionarmos um elemento da estrutura do código. Existem várias, por exemplo:
:first-child – seleciona o primeiro filho de um outro elemento.
:last-child – seleciona o último filho de um elemento.
:root – representa um elemento que é a raiz do documento. No HTML 4, é sempre a tag HTML.
:nth-child() – permite que selecionemos qualquer elemento no meio de um grupo de elementos. Por exemplo, você pode selecionar linhas de uma tabela. Assim, podemos fazer uma tabela zebrada, sem a ajuda de javascript. Há variações dessa pseudo-classe para podermos pegar os elementos de baixo para cima (:nth-last-child) e assim por diante.
:lang() – seleciona elementos que tem o atributo lang com um valor específico.
Fonte CSS Select: http://bavotasan.com/2011/style-select-box-using-only-css/
Fonte Pseudo-Classes: http://tableless.com.br/pseudo-classes-css/
-
Uma boa alternativa. No final, as mudanças não estão sendo feito a própia cetinha, mas sim, ela está sendo trocado por outra imagem. Commented 3/02/2014 às 18:08
-
Eu uso isto ai em algumas de minhas aplicações, realmente foi a única maneira que encontrei. Commented 3/02/2014 às 18:50
A tag <select>
não se inclui nos elementos disponíveis para estilizar. Nesse caso, as pseudo-classes :hover
, :focus
, etc. também não irão funcionar.
A melhor maneira para 'modificar' essa setinha (e por se, o resto do elemento), seria trocá-la com uma que você mesmo fabricou. Assim sendo, poderá visualizá-la por meio do JavaScript e/ou CSS.
Há alguns componentes nativos dos browser possuem comportamentos que não podem ser editados via CSS.
Se isto for realmente necessário, existe plugins em Javascript que trocam os componentes nativos para códigos HTML que podem ser formatados.
Neste link você pode escolher algum que lhe atenda.
Cuidado com essas personalizações, criar aplicativos dependentes do Javascript pode ser um tiro no pé. Procure sempre componentes que não impossibilite a utilização caso o Javascript esteja desabilitado.
Alguns componentes tambem fornecem suporte a WAI ARIA que são regras aplicadas ao HTML para aumentar a acessibilidade do seu código. Essas regras apesar de serem tratadas na maioria das vezes como recursos para deficientes visuais, são recursos excelentes para que os usuários consigam utilizar por exemplo dentro do carro utilizando o comando de voz ou auxilam robos de busca como o GoogleBot a identificar e indexar corretamente o tipo de conteúdo.
Outra coisa que deve ter em mente é o suporte para mobile, alguns destes componentes não ficam usuais em dispositivos móveis. Para contonar este problema, você pode optar por escolher componentes voltados para frameworks CSS, como o Twitter Bootstrap ou Fundation, ou mesmo o jQuery Mobile.