cssjsfprimefacescomposite-component

How to override CSS for a label that is part of a composite component?

I'm new to CSS and have a question that I don't seem to find any answer for it. I have a composite component, which is basically a Primefaces Checkbox, this is a composite component, for this element I would like to increase the width of the label.

I have tried to add styleClass="myStyle" to my checkBox and then in CSS:

.fullPanel.test label{
   width:25%;  
}

This is my checkBox:

<gcc:checkBox id="angabenKorrekt" label="#{messages['checkBoxLabel']}"
            value="#{bean.checkBox}" />

So looks my generated page, when inspecting it: HTML inspector

Basically I want to be able to change the default CSS for some of the UI elements. For now the style comes from: .fullPanel .inputBox label as shown in print screen.

Solution

  • This should work as per your html inspector, use !important only if there is no other way.

    .fullPanel .inputBox label{
   width:25%;  
}