How to make an image behave like in Primefaces?

Question

I am trying to change the style of a <p:selectBooleanCheckbox> in <p:panelGrid> to a checkable image like in this exemple, my problem is how to choose the right CSS classes to modify the style the Primefaces component with my new style because in the HTML output in the browser I found many CSS classes

my CSS style:

.checkimage{
display:none;
}

.checkimage + label{
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    position: absolute;  
}

.checkimage + label img{
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    opacity: 0.4;
    filter: alpha(opacity=40);
    height: 100px;
    width: 100px;
    display:block;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid;
    border-radius: 0.75em;
}
.checkimage + label:hover img{
    -webkit-filter: grayscale(65%);
    filter: grayscale(65%);
    opacity: 0.8;
    filter: alpha(opacity=80);
}

.checkimage:checked + label img{ 
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
    opacity: 1.0;
    filter: alpha(opacity=100);

}

This is the HTML output, so which of these classes should I choose in my CSS style, all what I need the Hover, the default status if the image and when the image is checked.

<div id="j_idt10:id1" class="ui-chkbox ui-widget checkimage">
        <div class="ui-helper-hidden-accessible">
            <input id="j_idt10:id1_input" name="j_idt10:id1_input"
                type="checkbox" aria-checked="false" />
        </div>

        <div class="ui-chkbox-box ui-widget ui-corner-all ui-state-default">
            <span class="ui-chkbox-icon ui-icon ui-icon-blank ui-c"></span>
        </div>

</div>


<label id="j_idt10:j_idt56" class="ui-outputlabel ui-widget" for="j_idt10:id1_input"> check one

     <img id="j_idt10:j_idt57" src="images/img1.jpg?pfdrid_c=true" alt="" />

</label>

And this my example in the XHTML file if it's needed :

<p:panelGrid>   
        <p:selectBooleanCheckbox styleClass="checkimage" id="id1" />
                <p:outputLabel for="id1" value="check one" >
                        <p:graphicImage for="id1"  url="images/img1.jpg"/> 
                </p:outputLabel>

        <p:selectBooleanCheckbox styleClass="checkimage" id="id2" />
                <p:outputLabel for="id2" value="check two" >
                        <p:graphicImage for="id2"  url="images/img2.jpg"/> 
                </p:outputLabel>

        <p:selectBooleanCheckbox styleClass="checkimage" id="id3" />
                <p:outputLabel for="id3" value="check three" >
                        <p:graphicImage for="id3"  url="images/img3.jpg"/> 
                </p:outputLabel>

</p:panelGrid>

When authoring CSS, don't look at source code of server side web framework, instead look at its generated HTML output (if you can't tell from top of head, just open page in browser and do rightclick and *View Source* or *Inspect Element*). This question is essentially a duplicate of http://stackoverflow.com/q/8768317, unless you reframe it to ask in HTML/CSS perspective (i.e. you provide HTML code instead of JSF code). Once you get the answer from HTML/CSS experts, it's a matter of rewriting JSF code in such way that it generates exactly the desired HTML/CSS output. — BalusC, Oct 02 '15 at 18:17
thank you for your answer Mr @BalusC, I did what you said but I found many CSS classes if the primefaces component, I think you are right, I will post the HTML output — Spartan, Oct 02 '15 at 18:34

Spartan · Accepted Answer · 2015-10-03T11:53:04.097

I found the solution : At first, the styling of the normal JSF Components is more easy than the Primefaces components, it means that the using of <h:XXX> instead of <p:XXX>.

<h:panelGrid>   
        <h:selectBooleanCheckbox styleClass="checkimage" id="id1" />
                <h:outputLabel for="id1" value="check one" >
                        <p:graphicImage for="id1"  url="images/img1.jpg"/> 
                </h:outputLabel>

        <h:selectBooleanCheckbox styleClass="checkimage" id="id2" />
                <h:outputLabel for="id2" value="check two" >
                        <p:graphicImage for="id2"  url="images/img2.jpg"/> 
                </h:outputLabel>

        <h:selectBooleanCheckbox styleClass="checkimage" id="id3" />
                <h:outputLabel for="id3" value="check three" >
                        <p:graphicImage for="id3"  url="images/img3.jpg"/> 
                </h:outputLabel>

</h:panelGrid>

and the HTML output int the browser is very simple :

<input id="j_idt9:id1" name="j_idt9:id1" checked="checked" class="checkimage" type="checkbox">

<label for="j_idt9:id1">check one
      <img id="j_idt9:j_idt57" src="images/img1.jpg?pfdrid_c=true" alt="">
</label>

score 0 · Answer 2 · answered Oct 03 '15 at 11:46

I don't know how do you want to indicate that image (checkbox) is checked but I did red border so from this example I hope you can work further.

panelGrid

<p:panelGrid>   
    <p:row>
        <p:column styleClass="radioColumn">
            <p:selectBooleanCheckbox styleClass="myRadio" id="id1" />
            <p:outputLabel for="id1" value="check one" >
                <p:graphicImage width="50" height="50" name="img/image1.png"/> 
            </p:outputLabel>
        </p:column>
        <p:column styleClass="radioColumn">
            <p:selectBooleanCheckbox styleClass="myRadio" id="id2"/>
            <p:outputLabel for="id2" value="check two" >
                <p:graphicImage width="50" height="50" name="img/image2.png"/> 
            </p:outputLabel>
        </p:column>
        <p:column styleClass="radioColumn">
            <p:selectBooleanCheckbox styleClass="myRadio" id="id3" />
            <p:outputLabel for="id3" value="check three" >
                <p:graphicImage width="50" height="50" name="img/image3.png"/> 
            </p:outputLabel>
        </p:column>
    </p:row>
</p:panelGrid>

styles

.myRadio {
    display:none;
}
.myRadio + label img{
    display:block;
    margin-left: auto;
    margin-right: auto;
}
.highlighted {
    border: 1px solid;
    border-color: red;
}

script

$(document).on("change", ".myRadio input", function () {
    $(this).closest(".radioColumn").find("img").toggleClass("highlighted");
});

How to make an image behave like in Primefaces?

2 Answers2