Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá pessoal,
Minha dúvida é a seguinte, é possível colocar uma imagem em um campo select? Nos options dele até consigo colocar, mas na tag select o navegado ignora a classe que coloquei....
segue o exemplo
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Título</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
.estilo {
background-image: url([http://www.fabiolody.com.br/blog/imasters.png);](http://www.fabiolody.com.br/blog/imasters.png);) background-repeat: no-repeat;
}
</style>
</head>
<body>
<select name="select" class="estilo">
<option value="um" selected class="estilo"> um</option>
<option value="dois" class="estilo"> dois</option>
</select>
</body>
</html>select é uma tag que informa que existem outras dentro ( option )
estilização de select não é muito legal, pois quase que não pode alterar nada, os navegadores não deixamsugiro que você faça uma lista, ai conseguirá colocar mais estilizações
abraço
não utiliza utilize um padding-left:
abraço
Olá Aprendiz CSS, obrigada pela resposta, mas poderias ser mais objetivo? É possível eu colocar uma imagem de fundo num select ou não?
Valeu
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="[http://www.w3.org/1999/xhtml">](http://www.w3.org/1999/xhtml)
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type"/>
<title>Option com Imagem by aprendacss.wordpress.com</title>
<style type="text/css">
select {
width: 200px;
}
.estilo {
background: transparent url([http://www.fabiolody.com.br/blog/imasters.png)](http://www.fabiolody.com.br/blog/imasters.png)) no-repeat right center;
padding-left: 10px;
}
</style>
</head>
<body>
<select name="nome" id="nome">
<option class="estilo" value="1">Um</option>
<option class="estilo" value="2">Dois</option>
<option class="estilo" value="3">Tres</option>
</select>
</body>
</html>mas se for nos outros options dá certo sim.
Testei no FF2 e no IE7
FF2=>Sucesso
IE7=>Falhaabraço
Acredito que já resolveram. Mas uma solução seria colocar uma tag antes do select e definir esta como estilo. Colocando o select dentro desta tag:
<div class='estilo'>
<select name='nome'>
<option value='um'>um</option>
</select>
</div>
[Lucien](http://webjospin.com.br)
Pessoal, esqueci de mencionar que a imagem nas opções aparece apenas no Firefox, no IE nem isso aparece.
Valeu