html - 如何使图像表现得像 <p :selectBooleanCheckbox> in Primefaces?

Question

我正在尝试更改 <p:selectBooleanCheckbox> 的样式在 <p:panelGrid>像这样的可检查图像 exemple ，我的问题是如何选择正确的 CSS 类来用我的新样式修改 Primefaces 组件的样式，因为在浏览器的 HTML 输出中我发现了许多 CSS 类

我的 CSS 样式:

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

}

这是 HTML 输出，所以我应该在我的 CSS 样式中选择这些类中的哪些，所有我需要的 Hover，默认状态 如果图像和当图像被检查时。

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

如果需要，这是我在 XHTML 文件中的示例:

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

Answer 1

我找到了解决方案: 首先，普通 JSF 组件的样式比 Primefaces 组件更容易，这意味着使用 <h:XXX>而不是 <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>

浏览器中的 HTML 输出非常简单:

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