0

tenho um selectOneRadio que tem 3 opções : Acabamento, embargo e Expedição

<h:selectOneRadio value="#{solicitacaoImpressaoBean.entrega.tipoGuia}" class="tipoGuia" >
                        <f:selectItem itemValue="Acabamento" itemLabel="Acabamento" />
                        <f:selectItem itemValue="Embargo" itemLabel="Embargo" />
                        <f:selectItem itemValue="Expedicao" itemLabel="Expedição"/>
    </h:selectOneRadio>

Quero colocar no primeiro a cor preto, no segundo a cor azul e no terceiro a cor verde.

tentei com css a seguinte maneira:

.tipoGuia tr:nth-child(1) td label   {
    color : black
 }
.tipoGuia tr:nth-child(2) td label   {
   color : blue
} 
.tipoGuia tr:nth-child(3) td label   {
   color : green;

} 

mas não funcionou. alguém tem ideia de como fazer isso? grato.

Consegui assim:

.tipoGuia tr td:nth-of-type(1){
    color : black;
}
.tipoGuia tr td:nth-of-type(2){
    color : blue;
}
.tipoGuia tr td:nth-of-type(3){
    color : green;
} 

2 Respostas 2

0

Quando precisei fazer algo parecido fiz da seguinte forma:

peguei o seu código como exemplo, para testá-lo aqui, usei styleClass, mas pode usar somente class também

<h:selectOneRadio styleClass="tipoGuia">
             <f:selectItem itemValue="Acabamento" itemLabel="Acabamento"/>
             <f:selectItem itemValue="Embargo" itemLabel="Embargo" />
             <f:selectItem itemValue="Expedicao" itemLabel="Expedição"  >
             </f:selectItem>
</h:selectOneRadio>

O que você precisa fazer é pegar o valor definido no itemValue e levar para o css, da seguinte forma:

.tipoGuia 
    input[value="Acabamento"] + label {color:black} 
.tipoGuia
    input[value="Embargo"] + label {color:blue}
.tipoGuia
    input[value="Expedicao"] + label {color:green}

Se você observar, quando inspecionamos os itens do select no navegador, ele sempre nos mostra um

<label for="enderecoDoSeuObjeto">Acabamento</label>

com os dados de cada item inspecionado.

1
  • Consegui assim: .tipoGuia tr td:nth-of-type(1){ color : black; } .tipoGuia tr td:nth-of-type(2){ color : blue; } .tipoGuia tr td:nth-of-type(3){ color : green; } 7/12/2017 às 16:39
0

Consegui assim:

.tipoGuia tr td:nth-of-type(1){
    color : black;
}
.tipoGuia tr td:nth-of-type(2){
    color : blue;
}
.tipoGuia tr td:nth-of-type(3){
    color : green;
} 

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .