Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

anderson_cs

Solução para estilizar a tag <select> com css

Por , em Desenvolvimento frontend

Recommended Posts

anderson_cs    0

anderson_cs
Postado

Gente,

 

Vou repassar uma solução que criei para estilizar a tag <select> usando apenas css.

 

Se alguém quiser, aperfeiçoa.

 

Lembrando que não dá pra alterar essa tag diretamente com css... a não ser background, font... Por isso, eu incluí uma div com uma imagem d background... a tag mesmo, a <select>, fica transparente.

 

vejam só:

<div id="select_b"><select name="Select1" id="select">
<option value="anderson">Anderson</option><option>Anderson</option>
</select></div>

agora o css

<style type="text/css">
#select {
	opacity: 0; filter:alpha(opacity=0);
}
#select_b {
	background: url(img/IMAGEM.jpg) no-repeat;
}
</style>

Daí é só usar a imaginação pra estilizar... coloca um <span> pra criar uma setinha estilizada e tal...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

Tópico Movido:

 

Webstandards: CSS / XML / XHTML / HTML http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Webstandards: CSS / XML / XHTML / HTML » Artigos, Tutoriais e Matérias (Webstandards)

 

Valeu por compartilhar. ^_^

 

Para quem quer algo mais complexo, pode usar JavaScript.

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

ao inves de DIV troque por <LABEL>, ou <span> ficaria algo assim:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<style type="text/css">
*{ margin:0;padding:0; }
#meuform{width:450px;}
#meuform fieldset{border:none;}
#meuform{display:block;margin:2px;}
#meuform span, #meuform span.cmp{
width:150px;
height:auto!important;
height:20px;
min-height:20px;
float:left;
}
#meuform span.cmp{
width:300px;
float:none;
background: url(img/IMAGEM.jpg) no-repeat;
}
#meuform span select { opacity: 0; filter:alpha(opacity=0); height:20px; }
</style>
<form id="meuform">
<fieldset>
<legend>Formulario</legend>
 <label>
  <span>Mensagem:</span>
  <span class="cmp">
  <select>
<option value="">sel 1</option>
<option value="">1</option>
<option value="">sel 1</option>
<option value="">1</option>
<option value="">sel 1</option>
<option value="">1</option>
  </select>
  </span>
 </label>
</fieldset></form>

 

Não testei ainda, depois eu testo e arrumo qualquer erro, vocês tambem podem usar UL,OL,LI e/ou Dl,DT,DL para alinhar os campos, conforme nosso amigo Giovani recomendou.

 

Obrigado por compartilhar a ideia amigo, espero que aceite a minha ideia.

[editado]Somente percibi algo ruim, o valor selecionado não aparece. =(

 

Bem depois eu testo melhor ^^

Compartilhar este post

Link para o post
Compartilhar em outros sites

fabinhosantos    0

fabinhosantos
Postado

Nicolas, muito legal sua dica do select jquery...

 

pena que comigo ficou inviavel, pq eu usso um script ajax para carregar a combo dinamicamente, dai quando uso o select estilizado a ultima combo não é carregada...

 

 

quando uso o jquery para estilizar a primeira combo não carrega mais a segunda....

 

mas valeu a dica...

 

eu precisava muito estilizar combos que funcionasse na IE e FIREFOX...

 

Até achei interessante, mas o ruim é que não aparece o nome do item selecionado dentro do combo.

 

Ainda fico com meu Jquery http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

http://www.brainfault.com/demo/selectbox/

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

Nicolas, muito legal sua dica do select jquery...

 

pena que comigo ficou inviavel, pq eu usso um script ajax para carregar a combo dinamicamente, dai quando uso o select estilizado a ultima combo não é carregada...

 

 

quando uso o jquery para estilizar a primeira combo não carrega mais a segunda....

 

mas valeu a dica...

 

eu precisava muito estilizar combos que funcionasse na IE e FIREFOX...

 

 

Até achei interessante, mas o ruim é que não aparece o nome do item selecionado dentro do combo.

 

Ainda fico com meu Jquery http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

http://www.brainfault.com/demo/selectbox/

 

Grande Nicolas ^^.

 

fabinhosantos funciona sim, é só execultar a função quando o AJAX retornar o resultado:

$('[ID DO COMBO CARREGADO POR AJAX').selectbox();

exemplo:

var combo = document.getElementById("novo combo");
if(ajax.status == 200) {
 combo.innerHTML = Ajax.responseText;/*Suponho que retorne isto <select id="novocombo">...</select>*/
 $('#novocombo').selectbox();
}
Não sei como você usa AJAX se é por Jquery, isto é apenas uma ideia para você entender.

 

Se não conseguir implementar cria um tópico na area de javascript e manda um MP com o link do topico para mim que eu ajudo você. Falow.

Compartilhar este post

Link para o post
Compartilhar em outros sites

T.Colucci    33

T.Colucci
Postado

Ae galera, desculpem ressuscitar o tópico (to parecendo gzuis)... mas achei muito interessante a proposta.

 

silverfox

Você tem alguma solução para o valor selecionado aparecer?

 

 

grato.

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

Ae galera, desculpem ressuscitar o tópico (to parecendo gzuis)... mas achei muito interessante a proposta.

 

silverfox

Você tem alguma solução para o valor selecionado aparecer?

 

 

grato.

 

Não a não ser o Jquery mesmo ;)

que para o meu ver em desenvolvimento deve ser o melhor =DD

 

Abração

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito