How to apply CSS in VF page

Question

I've created a VF page, in which I'm displaying a dynamic Checkbox. Now i want when i check the checkbox, the background color should be change and when uncheck the checkbox, background color should be normal as original.

How to apply Css to dynamic checkbox. How to get ID in this condition.

My apex page code is

<td style="display: inline-table">
            <div id="Territory" style="">Territory: <br/>

                <apex:selectcheckboxes layout="pagedirection" value="{!Territory}" onchange="PutValue(this.id,this.value);" style="">                    
                   <apex:selectoptions value="{!TerritoryValues}" />  
               </apex:selectcheckboxes> 

            </div>  

         </td>

Please suggest.

Answer 1

A checkbox does not have background color so setting the background color property will not work.<apex:selectcheckboxes generates a html table and put every checkbox inside a <td> element. One possible solution is to get the parent <td> and apply the background color to it when user click on it. Based on the state whether it is checked or not, the background color property of the <td> element can be changed as below.

<apex:page controller="sampleCon">
    <script type="text/javascript">
        function changeColor(elem){
            var pElem = elem.parentElement;
            if(elem.checked){
                pElem.style.backgroundColor = "red";
            }else{
                pElem.style.backgroundColor = "";
            }
        }
    </script>
    <apex:form>
        <div id="Territory">Territory: <br/>
            <apex:selectCheckboxes value="{!countries}" layout="pagedirection" onclick="changeColor(this);">
                <apex:selectOptions value="{!items}"/>
            </apex:selectCheckboxes>
        </div>  
    </apex:form>
</apex:page>

Screen:

Answer 2

Would suggest you to try this:

#Territory input[type=checkbox]:checked {
   background-color: red !important;
}

By this css you're selecting your div by Id and then apply background-color: red to every input that have type checkbox and in :checked state.

It's hard to provide you 100% correct solution since there're always salesforce styles in play and they could override your css. In order to make your css work, you need to play with developer console in chrome(or simular instruments in other browsers).

Edited: As mentioned by Saroj Bera checkboxes don't have a background color property. You need to apply a background color to parent element.