Ir para conteúdo

POWERED BY:

Arquivado

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

bimpercursso

cor de fundo <select>

Por , em Desenvolvimento frontend

Recommended Posts

bimpercursso    0

bimpercursso
Postado

Olá pessoal, estou com uma dúvida aqui css, veja que pode me ajuda com isso.

 

tenho um combo 

<select>
    <option value="red" style="background-color:red;"> cor 1 </option>
    <option value="blue" style="background-color:blue;"> cor 2 <option>
</select>

 

porem como o style nao esta no <select> e sim no <option> quando eu seleciono uma cor nao fica selecionado a cor de fundo, no Google Chrome, no IE funciona normal.

 

alguém poderia me ajudar com isso

Obrigado

Compartilhar este post

Link para o post
Compartilhar em outros sites

Odair Oliveira_163654    2

Odair Oliveira_163654
Postado

Esse funciona! rsrs é bem simples, só copia e altera as cores =D

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function muda_cor(selecionado){
       if(selecionado=="Ativo"){
               document.status_evento.status.style.background = "#00CC35";
       }else if(selecionado=="Fechado"){
               document.status_evento.status.style.background = "#CC0035";
       }else{
               document.status_evento.status.style.background = "#999";
       }
}
muda_cor("Ativo");
</script>
</head>

<body>
<form action="status.php" method="post" name="status_evento" >
                 <label>Status:</label>
                 <select name="status" style="font:bold 11px Tahoma;" onchange="muda_cor(this.value);">
                       <option value="Ativo" selected="selected" style="color:#00CC35;" >Ativo</option>
                       <option value="Fechado" style="color:#CC0035;" >Fechado</option>
                       <option value="Suspenso" style="color:#999;" >Suspenso</option>
                 </select>
 </form>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Layo    10

Layo
Postado

No css a solução seria:

 

1 - Todas as cores de fundo iguais:

 

select {
background-color: #F00;
}

<select>
    <option value="red"> cor 1 </option>
    <option value="blue"> cor 2 </option>
</select>

 

2 - Cores para cada campo:

 

.vermelho {
background-color: #F00;
}

.azul {
background-color: #00F;
}

<select>
    <option value="red" class="vermelho"> cor 1 </option>
    <option value="blue" class="azul"> cor 2 </option>
</select>

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