how to change the color in each selectitem of a selectOneRadio jsf

Navigation
0

I have a selectOneRadio which has 3 options: Finishing, embargo and Shipping 

<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>

I want to put the first one in black, the second in blue and the third in green.

I tried with css as follows: 

.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;

}

But it did not work. Anyone have any idea how to do this? grateful.

I was able to do this: 

.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;
}
    
asked by anonymous 07.12.2017 / 13:18

2 answers

0

I was able to do this: 

.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;
}
    
31.01.2018 / 12:55
0

When I needed to do something similar, I did the following:

I took your code as an example, to test it here, I used styleClass, but can only use class as well 

<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>

What you need to do is take the value set in the itemValue and take it to the css, as follows: 

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

If you notice, when we inspect the select items in the browser, it always shows us a 

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

with the data of each item inspected.

    
07.12.2017 / 14:57
Error loading fonts in Vue build (Webpack) Is it possible to process messages received by WhatsApp in a Web Service?