Como estilo uma queda com apenas CSS?
Existe uma maneira só de estilo CSS para um {[[0]} dropdown?
Preciso de estilo a {[[0]} o mais humanamente possível, sem nenhum JavaScript. Quais são as propriedades que posso usar para fazê-lo em CSS?
este código tem de ser compatível com todos os navegadores principais:
- Internet Explorer 6,7 e 8
- Firefox
- Safari
Eu sei que consigo fazê-lo com JavaScript: exemplo .
E não estou a falar de estilo simples. I só queremos saber o que podemos fazer com o CSS.eu encontrei perguntas similares sobre o fluxo de pilha.
e Este em Doctype.com.
24 answers
Aqui estão 3 soluções:
Solução # 1-aparência: nenhuma-com solução de trabalho ie10-11 (Demo)
Para esconder a seta por omissão appearance: none no elemento seleccionar, adicione depois a sua própria seta personalizada com background-image
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; /* remove default arrow */
background-image: url(...); /* add custom arrow */
}
Suporte Do Navegador:
appearance: none tem um suporte muito bom para navegador (caniuse ) - excepto para ie11-e firefox 34 -
select::-ms-expand {
display: none; /* hide the default arrow in ie10 and ie11 */
}
Se o ie9 é uma preocupação - não temos como remover a seta predefinida (o que significaria que teríamos agora duas setas), mas, poderíamos usar um selector IE9 funky para pelo menos desfazer a nossa seta personalizada - deixando a seta por omissão seleccionada intacta.
/* target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
select {
background-image:none\9;
padding: 5px\9;
}
}
Todos juntos:
select {
margin: 50px;
width: 150px;
padding: 5px 35px 5px 5px;
font-size: 16px;
border: 1px solid #ccc;
height: 34px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url(http://www.stackoverflow.com/favicon.ico) 96% / 15% no-repeat #eee;
}
/* CAUTION: IE hackery ahead */
select::-ms-expand {
display: none; /* remove default arrow in IE 10 and 11 */
}
/* target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
select {
background:none\9;
padding: 5px\9;
}
}<select>
<option>Apples</option>
<option selected>Pineapples</option>
<option>Chocklate</option>
<option>Pancakes</option>
</select>Esta solução é fácil e tem um bom suporte para o navegador - deve, em geral, ser suficiente.
Se o suporte do navegador para ie9-e firefox 34-é necessário, em seguida, continue lendo...
Solução #2 truncar o elemento select para esconder a seta por omissão (Demo)
Enrole o elemento select num div com uma largura fixa e overflow:hidden.
Então dê ao elemento select uma largura de cerca de 20 pixels maior que o div .
O resultado é que a seta por omissão para baixo do elemento select será escondida (devido ao overflow:hidden no recipiente), e você pode colocar qualquer imagem de fundo que quiser no lado direito do div.
A vantagemdesta abordagem é que é cross-browser(Internet Explorer 8 e mais tarde, WebKit , e Gecko ). No entanto, a desvantagem desta abordagem é que as opções drop-down jugs para fora do lado direito (pelos 20 pixels que escondemos... porque os elementos da opção tomam a largura da selecção elemento).
[deve - se notar, no entanto, que se o elemento personalizado select for necessário apenas para os dispositivos móveis - Então o problema acima não se aplica-devido à forma como cada telemóvel Abre o elemento select. Então, para mobile, esta pode ser a melhor solução.]
.styled select {
background: transparent;
width: 150px;
font-size: 16px;
border: 1px solid #ccc;
height: 34px;
}
.styled {
margin: 50px;
width: 120px;
height: 34px;
border: 1px solid #111;
border-radius: 3px;
overflow: hidden;
background: url(http://www.stackoverflow.com/favicon.ico) 96% / 20% no-repeat #eee;
}<div class="styled">
<select>
<option>Pineapples</option>
<option selected>Apples</option>
<option>Chocklate</option>
<option>Pancakes</option>
</select>
</div>Se a seta personalizada for necessária no Firefox-antes de versão 35 - mas não é necessário suporte versões antigas do IE-então continue lendo...
Solução # 3-Use a propriedade pointer-events (Demo)
A ideia aqui é sobrepor um elemento sobre a seta nativa para baixo (para criar a nossa personalizada) e depois desautorizar os eventos de ponteiros sobre ela.
Vantagem: Funciona bem no WebKit e no Gecko. Também tem bom aspecto (não há elementos de arranque)
Desvantagem: Internet Explorer (IE10 e para baixo) não suporta {[[17]}, o que significa que não pode carregar na seta personalizada. Além disso, outra desvantagem (óbvia) com este método é que você não pode atingir a sua nova imagem de seta com um efeito de hover ou cursor da mão, porque acabamos de desativar os eventos de ponteiro sobre eles!
No entanto, com este método você pode usar o modernizador ou comentários condicionais para fazer com que o Internet Explorer volte ao padrão construído no arrow.
NB: sendo que o Internet Explorer 10 não suporta conditional comments mais: se quiser usar esta abordagem, deve provavelmente usar Modernizr . No entanto, ainda é possível excluir o ponteiro-eventos CSS do Internet Explorer 10 com um hack CSS descrito aqui.
.notIE {
position: relative;
display: inline-block;
}
select {
display: inline-block;
height: 30px;
width: 150px;
outline: none;
color: #74646e;
border: 1px solid #C8BFC4;
border-radius: 4px;
box-shadow: inset 1px 1px 2px #ddd8dc;
background: #fff;
}
/* Select arrow styling */
.notIE .fancyArrow {
width: 23px;
height: 28px;
position: absolute;
display: inline-block;
top: 1px;
right: 3px;
background: url(http://www.stackoverflow.com/favicon.ico) right / 90% no-repeat #fff;
pointer-events: none;
}
/*target Internet Explorer 9 and Internet Explorer 10:*/
@media screen and (min-width: 0\0) {
.notIE .fancyArrow {
display: none;
}
}<!--[if !IE]> -->
<div class="notIE">
<!-- <![endif]-->
<span class="fancyArrow"></span>
<select>
<option>Apples</option>
<option selected>Pineapples</option>
<option>Chocklate</option>
<option>Pancakes</option>
</select>
<!--[if !IE]> -->
</div>
<!-- <![endif]-->É possível, mas infelizmente principalmente em navegadores baseados no Webkit, na medida em que nós, como desenvolvedores, exigimos. Aqui está o exemplo do estilo CSS obtido a partir do Painel de opções do Chrome através do Inspector de ferramentas de desenvolvimento incorporadas, melhorado para corresponder às propriedades de CSS actualmente suportadas na maioria dos navegadores modernos:
select {
-webkit-appearance: button;
-moz-appearance: button;
-webkit-user-select: none;
-moz-user-select: none;
-webkit-padding-end: 20px;
-moz-padding-end: 20px;
-webkit-padding-start: 2px;
-moz-padding-start: 2px;
background-color: #F07575; /* fallback color if gradients are not supported */
background-image: url(../images/select-arrow.png), -webkit-linear-gradient(top, #E5E5E5, #F4F4F4); /* For Chrome and Safari */
background-image: url(../images/select-arrow.png), -moz-linear-gradient(top, #E5E5E5, #F4F4F4); /* For old Fx (3.6 to 15) */
background-image: url(../images/select-arrow.png), -ms-linear-gradient(top, #E5E5E5, #F4F4F4); /* For pre-releases of IE 10*/
background-image: url(../images/select-arrow.png), -o-linear-gradient(top, #E5E5E5, #F4F4F4); /* For old Opera (11.1 to 12.0) */
background-image: url(../images/select-arrow.png), linear-gradient(to bottom, #E5E5E5, #F4F4F4); /* Standard syntax; must be last */
background-position: center right;
background-repeat: no-repeat;
border: 1px solid #AAA;
border-radius: 2px;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
color: #555;
font-size: inherit;
margin: 0;
overflow: hidden;
padding-top: 2px;
padding-bottom: 2px;
text-overflow: ellipsis;
white-space: nowrap;
}
Quando executar este código em qualquer página dentro de um navegador baseado no Webkit, deverá alterar a aparência da caixa de selecção, remover a seta-os-Padrão e adicionar uma seta-PNG, colocar algumas espaçamento antes e depois da etiqueta, quase tudo o que você quiser.
A parte mais importante é appearance propriedade, o que muda a forma como o elemento se comporta.
Funciona perfeitamente em quase todos os navegadores baseados no Webkit, incluindo os móveis, embora o Gecko não suporte appearance assim como o Webkit, ao que parece.
O elemento select e a sua funcionalidade de Lista são difíceis de estilo.
Atributos de estilo para seleccionar o elemento por Chris Heilmann confirma o que Ryan Dohery disse em um comentário à primeira resposta:
" o elemento select faz parte do sistema operacional, não o cromo do navegador. Portanto, é muito não confiável para o estilo, e não necessariamente faz sentido tentar assim."
A maior inconsistência que eu notei ao estilizar as dropdowns select é Safari ea renderização do Google Chrome (O Firefox é totalmente personalizável através do CSS). Depois de algumas buscas em profundidades obscuras da Internet, encontrei o seguinte, que quase resolve completamente os meus problemas com o WebKit:
Safari e Google Chrome fix:
select {
-webkit-appearance: none;
}
Isto, no entanto, remove a seta para baixo. Poderá adicionar uma seta para baixo com um próximo div com um fundo, margem negativa ou absolutamente posicionado sobre a lista de selecção.
* estão disponíveis mais informações e outras variáveis em propriedade do CSS: - webkit-Aparência.
<select> as tags podem ser estilizadas através do CSS como qualquer outro elemento HTML em uma página HTML renderizada em um navegador. Abaixo está um exemplo (excessivamente simples) que posicionará um elemento selecionado na página e renderá o texto das opções em azul.
Ficheiro HTML de exemplo (selectExample.html):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Select Styling</title>
<link href="selectExample.css" rel="stylesheet">
</head>
<body>
<select id="styledSelect" class="blueText">
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="cherry">Cherry</option>
</select>
</body>
</html>
Exemplo de ficheiro CSS (selectExample.CSS):
/* All select elements on page */
select {
position: relative;
}
/* Style by class. Effects the text of the contained options. */
.blueText {
color: #0000FF;
}
/* Style by id. Effects position of the select drop down. */
#styledSelect {
left: 100px;
}
Eu tinha este problema exato, exceto que eu não podia usar imagens e não estava limitado pelo suporte do navegador. Isto deve ser "no spec" e com sorte começar a trabalhar em todos os lugares eventualmente.
Ele usa camadas de fundo rodadas para "cortar" uma seta para baixo, como pseudo-elementos não funcionariam para o elemento select. Substitua "hotpink" pela sua cor favorita-Eu uso uma variável.
select {
font: 400 12px/1.3 "Helvetica Neue", sans-serif;
-webkit-appearance: none;
appearance: none;
border: 1px solid hotpink;
line-height: 1;
outline: 0;
color: hotpink;
border-color: hotpink;
padding: 0.65em 2.5em 0.55em 0.75em;
border-radius: 3px;
background: linear-gradient(hotpink, hotpink) no-repeat,
linear-gradient(-135deg, rgba(255,255,255,0) 50%, white 50%) no-repeat,
linear-gradient(-225deg, rgba(255,255,255,0) 50%, white 50%) no-repeat,
linear-gradient(hotpink, hotpink) no-repeat;
background-color: white;
background-size: 1px 100%, 20px 20px, 20px 20px, 20px 60%;
background-position: right 20px center, right bottom, right bottom, right bottom;
}<select>
<option>So many options</option>
<option>...</option>
</select>O post no blogComo preencher o formulário CSS estilo sem JavaScript funciona para mim, mas falha na Ópera.
select {
border: 0 none;
color: #FFFFFF;
background: transparent;
font-size: 20px;
font-weight: bold;
padding: 2px 10px;
width: 378px;
*width: 350px;
*background: #58B14C;
}
#mainselection {
overflow: hidden;
width: 350px;
-moz-border-radius: 9px 9px 9px 9px;
-webkit-border-radius: 9px 9px 9px 9px;
border-radius: 9px 9px 9px 9px;
box-shadow: 1px 1px 11px #330033;
background: url("arrow.gif") no-repeat scroll 319px 5px #58B14C;
}
<div id="mainselection">
<select>
<option>Select an Option</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
appearance:none que remove a formatação por omissão. Uma vez que toda a formatação se foi, você tem que adicionar de volta na seta que diferencia visualmente a seleção a partir da entrada.
Exemplo de Trabalho: https://jsfiddle.net/gs2q1c7p/
select:not([multiple]) {
-webkit-appearance: none;
-moz-appearance: none;
background-position: right 50%;
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDZFNDEwNjlGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFNDEwNkFGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NkU0MTA2N0Y3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NkU0MTA2OEY3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuGsgwQAAAA5SURBVHjaYvz//z8DOYCJgUxAf42MQIzTk0D/M+KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAAMAzNENEOH+do8AAAAASUVORK5CYII=);
padding: .5em;
padding-right: 1.5em
}
#mySelect {
border-radius: 0
}<select id="mySelect">
<option>Option 1</option>
<option>Option 2</option>
</select>select {
outline: 0;
overflow: hidden;
height: 30px;
background: #2c343c;
color: #747a80;
border: #2c343c;
padding: 5px 3px 5px 10px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 10px;
}
select option {border: 1px solid #000; background: #010;}
Se o estilo é um problema importante usando um elemento completamente personalizado pode ajudar, como o descrito no post do blogreinventando uma gota com CSS e jQuery.
Nos navegadores modernos é relativamente indolor estilo o {[[2]} em CSS. Com appearance: none a única parte complicada é substituir a seta (se é isso que queres). Aqui está uma solução que usa uma linha data: URI com texto simples SVG:
select {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background-repeat: no-repeat;
background-size: 0.5em auto;
background-position: right 0.25em center;
padding-right: 1em;
background-image: url("data:image/svg+xml;charset=utf-8, \
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'> \
<polygon points='0,0 60,0 30,40' style='fill:black;'/> \
</svg>");
}<select>
<option>Option 1</option>
<option>Option 2</option>
</select>
<select style="font-size: 2rem;">
<option>Option 1</option>
<option>Option 2</option>
</select>O resto do estilo (bordas, estofos, cores, etc.) é bastante simples.
Isto funciona em todos os navegadores que tentei (Firefox 50, Chrome 55, Edge 38 e Safari 10). Um a nota sobre o Firefox é que, se quiser usar o carácter# no URI de dados (por exemplo fill: #000), tem de O escapar (fill: %23000).
Cheguei ao teu caso usandoBootstrap . Esta é a solução mais simples que funciona:
select.form-control {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background-position: right center;
background-repeat: no-repeat;
background-size: 1ex;
background-origin: content-box;
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICBpZD0ic3ZnMiIKICAgdmlld0JveD0iMCAwIDM1Ljk3MDk4MyAyMy4wOTE1MTgiCiAgIGhlaWdodD0iNi41MTY5Mzk2bW0iCiAgIHdpZHRoPSIxMC4xNTE4MTFtbSI+CiAgPGRlZnMKICAgICBpZD0iZGVmczQiIC8+CiAgPG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhNyI+CiAgICA8cmRmOlJERj4KICAgICAgPGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPgogICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PgogICAgICAgIDxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4KICAgICAgICA8ZGM6dGl0bGU+PC9kYzp0aXRsZT4KICAgICAgPC9jYzpXb3JrPgogICAgPC9yZGY6UkRGPgogIDwvbWV0YWRhdGE+CiAgPGcKICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjAyLjAxNDUxLC00MDcuMTIyMjUpIgogICAgIGlkPSJsYXllcjEiPgogICAgPHRleHQKICAgICAgIGlkPSJ0ZXh0MzMzNiIKICAgICAgIHk9IjYyOS41MDUwNyIKICAgICAgIHg9IjI5MS40Mjg1NiIKICAgICAgIHN0eWxlPSJmb250LXN0eWxlOm5vcm1hbDtmb250LXdlaWdodDpub3JtYWw7Zm9udC1zaXplOjQwcHg7bGluZS1oZWlnaHQ6MTI1JTtmb250LWZhbWlseTpzYW5zLXNlcmlmO2xldHRlci1zcGFjaW5nOjBweDt3b3JkLXNwYWNpbmc6MHB4O2ZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZTtzdHJva2Utd2lkdGg6MXB4O3N0cm9rZS1saW5lY2FwOmJ1dHQ7c3Ryb2tlLWxpbmVqb2luOm1pdGVyO3N0cm9rZS1vcGFjaXR5OjEiCiAgICAgICB4bWw6c3BhY2U9InByZXNlcnZlIj48dHNwYW4KICAgICAgICAgeT0iNjI5LjUwNTA3IgogICAgICAgICB4PSIyOTEuNDI4NTYiCiAgICAgICAgIGlkPSJ0c3BhbjMzMzgiPjwvdHNwYW4+PC90ZXh0PgogICAgPGcKICAgICAgIGlkPSJ0ZXh0MzM0MCIKICAgICAgIHN0eWxlPSJmb250LXN0eWxlOm5vcm1hbDtmb250LXZhcmlhbnQ6bm9ybWFsO2ZvbnQtd2VpZ2h0Om5vcm1hbDtmb250LXN0cmV0Y2g6bm9ybWFsO2ZvbnQtc2l6ZTo0MHB4O2xpbmUtaGVpZ2h0OjEyNSU7Zm9udC1mYW1pbHk6Rm9udEF3ZXNvbWU7LWlua3NjYXBlLWZvbnQtc3BlY2lmaWNhdGlvbjpGb250QXdlc29tZTtsZXR0ZXItc3BhY2luZzowcHg7d29yZC1zcGFjaW5nOjBweDtmaWxsOiMwMDAwMDA7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmU7c3Ryb2tlLXdpZHRoOjFweDtzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1saW5lam9pbjptaXRlcjtzdHJva2Utb3BhY2l0eToxIj4KICAgICAgPHBhdGgKICAgICAgICAgaWQ9InBhdGgzMzQ1IgogICAgICAgICBzdHlsZT0iZmlsbDojMzMzMzMzO2ZpbGwtb3BhY2l0eToxIgogICAgICAgICBkPSJtIDIzNy41NjY5Niw0MTMuMjU1MDcgYyAwLjU1ODA0LC0wLjU1ODA0IDAuNTU4MDQsLTEuNDczMjIgMCwtMi4wMzEyNSBsIC0zLjcwNTM1LC0zLjY4MzA0IGMgLTAuNTU4MDQsLTAuNTU4MDQgLTEuNDUwOSwtMC41NTgwNCAtMi4wMDg5MywwIEwgMjIwLDQxOS4zOTM0NiAyMDguMTQ3MzIsNDA3LjU0MDc4IGMgLTAuNTU4MDMsLTAuNTU4MDQgLTEuNDUwODksLTAuNTU4MDQgLTIuMDA4OTMsMCBsIC0zLjcwNTM1LDMuNjgzMDQgYyAtMC41NTgwNCwwLjU1ODAzIC0wLjU1ODA0LDEuNDczMjEgMCwyLjAzMTI1IGwgMTYuNTYyNSwxNi41NDAxNyBjIDAuNTU4MDMsMC41NTgwNCAxLjQ1MDg5LDAuNTU4MDQgMi4wMDg5MiwwIGwgMTYuNTYyNSwtMTYuNTQwMTcgeiIgLz4KICAgIDwvZz4KICA8L2c+Cjwvc3ZnPgo=");
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<section class="container">
<form class="form-horizontal">
<select class="form-control">
<option>One</option>
<option>Two</option>
</select>
</form>
</section>Nota: O material base64 é fa-chevron-down em SVG.
Use a propriedade clip para recortar os contornos e a seta do elemento select, adicionando depois os seus próprios estilos de substituição ao invólucro:
<!DOCTYPE html>
<html>
<head>
<style>
select { position: absolute; clip:rect(2px 49px 19px 2px); z-index:2; }
body > span { display:block; position: relative; width: 64px; height: 21px; border: 2px solid green; background: url(http://www.stackoverflow.com/favicon.ico) right 1px no-repeat; }
</style>
</head>
<span>
<select>
<option value="">Alpha</option>
<option value="">Beta</option>
<option value="">Charlie</option>
</select>
</span>
</html>Use uma segunda opção com opacidade zero para tornar o botão clicável:
<!DOCTYPE html>
<html>
<head>
<style>
#real { position: absolute; clip:rect(2px 51px 19px 2px); z-index:2; }
#fake { position: absolute; opacity: 0; }
body > span { display:block; position: relative; width: 64px; height: 21px; background: url(http://www.stackoverflow.com/favicon.ico) right 1px no-repeat; }
</style>
</head>
<span>
<select id="real">
<option value="">Alpha</option>
<option value="">Beta</option>
<option value="">Charlie</option>
</select>
<select id="fake">
<option value="">Alpha</option>
<option value="">Beta</option>
<option value="">Charlie</option>
</select>
</span>
</html>As coordenadas diferem entre Webkit e outros navegadores, mas um @Media query pode cobrir isso.
Referências
Editar este elemento não é recomendado, mas se você quiser tentar é como qualquer outro elemento HTML.
Editar o exemplo:
/*Edit select*/
select {
/*css style here*/
}
/*Edit option*/
option {
/*css style here*/
}
/*Edit selected option*/
/*element attr attr value*/
option[selected="selected"] {
/*css style here*/
}
<select>
<option >Something #1</option>
<option selected="selected">Something #2</option>
<option >Something #3</option>
</select>
Um bom exemplo que usa {[[0]} e :before para fazer o truque está em seleccionar a opção de estilo com o CSS3 | CSSDeck
select {
font-weight: bold;
}
Claro que também pode usar uma classe CSS para o estilo, como qualquer outro elemento:
<select class="important">
<option>Important Option</option>
<option>Another Important Option</option>
</select>
<style type="text/css">
.important {
font-weight: bold;
}
</style>
label {
position: relative;
display: inline-block;
}
select {
display: inline-block;
padding: 4px 3px 5px 5px;
width: 150px;
outline: none;
color: black;
border: 1px solid #C8BFC4;
border-radius: 4px;
box-shadow: inset 1px 1px 2px #ddd8dc;
background-color: lightblue;
}
Isto usa uma cor de fundo para seleccionar elementos e eu removi a imagem..
A partir do Internet Explorer 10, você pode usar o ::-ms-expand pseudo selector de elementos ao estilo e esconder o elemento da seta para baixo.
select::-ms-expand {
display:none;
/* or visibility: hidden; to keep it's space/hitbox */
}
O estilo restante deve ser semelhante a outros navegadores.
Aqui está um garfo básico do jsfiddle de Danield que aplica suporte para IE10
Funciona IE10+ com um recuo seguro para IE8/9. Uma advertência para estes navegadores é que a imagem de fundo deve ser posicionada e pequena o suficiente para se esconder atrás do controle de expansão nativo.
HTML
<select name='options'>
<option value='option-1'>Option 1</option>
<option value='option-2'>Option 2</option>
<option value='option-3'>Option 3</option>
</select>
SCSS
body {
padding: 4em 40%;
text-align: center;
}
select {
$bg-color: lightcyan;
$text-color: black;
appearance: none; // using -prefix-free http://leaverou.github.io/prefixfree/
background: {
color: $bg-color;
image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1255/caret--down-15.png");
position: right;
repeat: no-repeat;
}
border: {
color: mix($bg-color, black, 80%);
radius: .2em;
style: solid;
width: 1px;
right-color: mix($bg-color, black, 60%);
bottom-color: mix($bg-color, black, 60%);
}
color: $text-color;
padding: .33em .5em;
width: 100%;
}
// Removes default arrow for IE10+
// IE 8/9 get dafault arrow which covers caret image
// as long as caret image is small than and positioned
// behind default arrow
select::-ms-expand {
display: none;
}
Codepen
Há uma maneira de estilo selecionar tags.
Se houver um parâmetro de "tamanho" na etiqueta, quase qualquer CSS será aplicado. Usando este truque, criei um violino que é praticamente equivalente a uma marca de seleção normal, além de que o valor pode ser editado manualmente como um ComboBox em linguagens visuais (a menos que você coloque readonly na etiqueta de entrada).
Então aqui está um exemplo mínimo para ver o princípio por trás:(você vai precisar de jQuery para o clique mecanismo):
<style>
/* only these 2 lines are truly required */
.stylish span {position:relative;}
.stylish select {position:absolute;left:0px;display:none}
/* now you can style the hell out of them */
.stylish input { ... }
.stylish select { ... }
.stylish option { ... }
.stylish optgroup { ... }
</style>
...
<div class="stylish">
<label> Choose your superhero: </label>
<span>
<input onclick="$(this).closest('div').find('select').slideToggle(110)">
<br>
<select size=15 onclick="$(this).hide().closest('div').find('input').val($(this).find('option:selected').text());">
<optgroup label="Fantasy"></optgroup>
<option value="gandalf">Gandalf</option>
<option value="harry">Harry Potter</option>
<option value="jon">Jon Snow</option>
<optgroup label="Comics"></optgroup>
<option value="tony">Tony Stark</option>
<option value="steve">Steven Rogers</option>
<option value="natasha">Natasha Romanova</option>
</select>
</span>
</div>
Repare como as etiquetas não encapsulam as opções que pertencem sob elas como normalmente deveriam; Sim, isto é intencional, é para o estilo. (A maneira bem-educada seria muito menos elegante.) E sim eles funcionam perfeitamente bem desta maneira.
Antes que alguém aponte fora a parte NO-JS: Eu sei que a pergunta dizia "sem Javascript". Para mim, isto é mais como por favor, não se preocupe com plugins, eu sei que eles podem fazer isso, mas eu preciso do modo nativo. Entendido, sem plugins, sem scripts extras incluídos, apenas o que cabe dentro de uma tag ' s "onclick". A única dependência é jQuery, para evitar o documento nativo".parentNode."loucura. Mas pode funcionar assim. Então sim, esta é uma tag seleta nativa com estilo nativo e alguns tratadores de onclick. É ... claramente não é "uma solução Javascript".
Divirtam-se!O segundo método na resposta do Danield ( https://stackoverflow.com/a/13968900/280972 pode ser melhorado para trabalhar com efeitos de passagem e outros eventos do rato. Certifique-se apenas de que o elemento "botão"vem logo a seguir ao elemento select na marcação. Em seguida, direccione-o com o selector + css:
HTML:
<select class="select-input">...</select>
<div class="select-button"></div>
CSS:
.select-input:hover+.select-button {
[hover styles here]
}
Isto irá, No entanto, mostrar o efeito hover quando pairar em qualquer lugar sobre o elemento select, não apenas sobre o"botão".
Eu sou usando este método em combinação com o Angular (uma vez que o meu projecto acontece ser um aplicativo Angular de qualquer forma), para cobrir todo o elemento select, e deixar o Angular mostrar o texto da opção seleccionada no "botão"-elemento. Neste caso, faz todo o sentido que o efeito hover se aplique quando paira em qualquer lugar sobre a seleção. Ele não funciona sem javascript embora, então se você quiser fazer isso, e seu site tem que trabalhar sem javascript, você deve se certificar de que seu script adiciona os elementos e aulas necessárias para o aprimoramento. Dessa forma, um navegador sem javascript irá simplesmente obter um normal, instável, selecione, em vez de um emblema de estilo que não atualiza corretamente.
Também pode adicionar um estilo hover à lista.
select {position:relative; float:left; width:21.4%; height:34px; background:#f9f9e0; border:1px solid #41533f; padding:0px 10px 0px 10px; color:#41533f; margin:-10px 0px 0px 20px; background: transparent; font-size: 12px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url(https://alt-fit.com/images/global/select-button.png) 100% / 15% no-repeat #f9f9e0;}
select:hover {background: url(https://alt-fit.com/images/global/select-button.png) 100% / 15% no-repeat #fff;}<html>
<head>
</head>
<body>
<select name="type" class="select"><option style="color:#41533f;" value="Select option">Select option</option>
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
</select>
</body>
</html>Uma solução só para CSS & HTML
Eu parece compatível com o Chrome, Firefox & IE11. Mas, por favor, deixe o seu feedback sobre outros navegadores da web.
Como sugerido pela @Danield answer, eu enrolo a minha selecção num div (mesmo duas divs para compatibilidade com o X-browser) para obter o comportamento esperado.
Veja http://jsfiddle.net/bjap2/
HTML:
<div class="sort-options-wrapper">
<div class="sort-options-wrapper-2">
<select class="sort-options">
<option value="choiceOne">choiceOne</option>
<option value="choiceOne">choiceThree</option>
<option value="choiceOne">choiceFour</option>
<option value="choiceFiveLongTestPurpose">choiceFiveLongTestPurpose</option>
</select>
</div>
<div class="search-select-arrow-down"></div>
</div>
CSS
.sort-options-wrapper {
display: inline-block;
position: relative;
border: 1px solid #83837f;
}
/* this second wrapper is needed for x-browser compatibility */
.sort-options-wrapper-2 {
overflow: hidden;
}
select {
margin-right: -19px; /* that's what hidding the default-provided browser arrow */
padding-left: 13px;
margin-left: 0;
border: none;
background: none;
/* margin-top & margin-bottom must be set since some browser have default values for select elements */
margin-bottom: 1px;
margin-top: 1px;
}
select:focus {
outline: none; /* removing default browsers outline on focus */
}
.search-select-arrow-down {
position: absolute;
height:10px;
width: 12px;
background: url(http://i.imgur.com/pHIYN06.png) scroll no-repeat 2px 0px;
left: 1px;
top: 5px;
}