Gostaria de adicionar algum estilo em uma caixa de seleção com o pseudo: after (para estilizar minha caixa de seleção com 2 partes e sem imagens). Aqui está o HTML:
<select name="">
<option value="">Test</option>
</select>
E isso não funciona. Não sei por que e não encontrei a resposta nas especificações do W3C. Aqui está o CSS:
select {
-webkit-appearance: none;
background: black;
border: none;
border-radius: 0;
color: white;
}
select:after {
content: " ";
display: inline-block;
width: 24px; height: 24px;
background: blue;
}
Então é normal ou existe um truque?
Respostas:
Não verifiquei isso extensivamente, mas tenho a impressão de que isso ainda não é possível, devido à maneira como os
selectelementos são gerados pelo sistema operacional no qual o navegador é executado, e não pelo próprio navegador.fonte
Eu estava procurando a mesma coisa, pois o fundo do meu select é igual à cor da seta. Como mencionado anteriormente, ainda é impossível adicionar qualquer coisa usando: before ou: after em um elemento select. Minha solução foi criar um elemento wrapper no qual adicionei o seguinte: before code.
E esse meu seleto
Eu usei o FontAwesome.io para minha nova seta, mas você pode usar o que quiser. Obviamente, essa não é uma solução perfeita, mas, dependendo de suas necessidades, pode ser suficiente.
fonte
Para a minha experiência, simplesmente não funciona, a menos que você esteja disposto a embrulhá-lo
<select>em algum invólucro. Mas o que você pode fazer é usar a imagem de fundo SVG. Por exemploApenas tome cuidado com a codificação de URL adequada por causa do IE. Você deve usar
charset=utf8(não apenasutf8), não usar aspas duplas (") para delimitar os valores dos atributos SVG, use apóstrofos (') para simplificar sua vida. Codifique URL s (% 3E). Caso você precise imprimir qualquer caractere não ASCII que você precise obter sua representação UTF-8 (por exemplo, o BabelMap pode ajudá-lo com isso) e depois forneça essa representação no formato codificado por URL - por exemplo, para aU+25BErepresentação UTF-8 ( BLACK ( BLACK DOWN-POINTING SMALL TRIANGLE)\xE2\x96\xBEque é%E2%96%BEquando codificado em URL.fonte
Esta publicação pode ajudar http://bavotasan.com/2011/style-select-box-using-only-css/
Ele está usando uma div externa com uma classe para resolver esse problema.
fonte
Enfrentou o mesmo problema. Provavelmente poderia ser uma solução:
fonte
Esta solução é semelhante à do sroy, mas com triângulo css em vez de fonte da web:
fonte
E se a modificação da marcação não for uma opção?
Aqui está uma solução que não tem requisitos para um wrapper: ele usa um SVG em uma imagem de plano de fundo. Pode ser necessário usar um decodificador de entidade HTML para entender como alterar a cor do preenchimento.
Comprimido de CSS-Tricks .
fonte
Esta é uma solução moderna que eu criei usando uma fonte incrível . As extensões de fornecedor foram omitidas por questões de concisão.
HTML
SCSS
Se o seu elemento de seleção tiver uma cor de plano de fundo definida, isso não funcionará, pois esse fragmento basicamente coloca o ícone da Chevron atrás do elemento de seleção (para permitir que cliques na parte superior do ícone ainda iniciem a ação de seleção).
No entanto, você pode estilizar o wrapper de seleção com o mesmo tamanho do elemento de seleção e estilizar seu plano de fundo para obter o mesmo efeito.
Confira meu CodePen para obter uma demonstração funcional que mostre esse código em uma caixa de seleção com temas escuros e claros, usando um rótulo comum e um marcador de "espaço reservado" e outros estilos de limpeza, como bordas e larguras.
PS Essa é uma resposta que eu havia postado em outra pergunta duplicada no início deste ano.
fonte
Instando o estilo da seleção porque você não adiciona uma div fora da seleção.
e estilo então em CSS
fonte