+ Start a Discussion
aswanijagadesh1.397398535585991E12aswanijagadesh1.397398535585991E12 

click on check box i want cross symbol in it instated of tick mark in visual force page?

hai friends 

i did like this 
<apex:page standardController="account" recordSetVar="acc" >
    <script>
        function callme()
        {
        alert("hi");
        input[type='checkbox'] {alert("haiff"); }
        }
   
    </script>
   
  
    <!--<style>
    function callme()
    {
    alert("hai");
    /*input[type="checkbox"]:checked{
        background-color: yellow;
        font-weight: bold;
    }*/
    }
     </style>-->


    <apex:form >
        <apex:pageBlock >
            <apex:pageBlockTable Value="{!acc}" var="a">
                <apex:column >
                <apex:inputCheckbox id="che" onclick="callme();"/>
                <apex:outputText value="{!a.name}"/>
                </apex:column>   
            </apex:pageBlockTable>
        </apex:pageBlock>   
    </apex:form>
   
</apex:page>
but i didn't get please help me to achieve this 
Vinit_KumarVinit_Kumar
You need to create custom CSS to achieve this in your VF page.

Go through below link for some sample CSS for checkboxes :-

http://css.dzone.com/articles/how-style-checkbox-css

http://cssdeck.com/labs/css-checkbox-styles
aswanijagadesh1.397398535585991E12aswanijagadesh1.397398535585991E12
i try but did n't get ,will you try it for me please urgent 
Ramu_SFDCRamu_SFDC
Follow the solution given in the post below

https://developer.salesforce.com/forums/ForumsMain?id=906F000000099TEIAY
aswanijagadesh1.397398535585991E12aswanijagadesh1.397398535585991E12
i don't want to  use two images 
 what my question is when i click on a check box   instard of tick mark i want cross mark 

aswanijagadesh1.397398535585991E12aswanijagadesh1.397398535585991E12
this is a sample code in html 

<!DOCTYPE html>
<html>
<style>
input[type=checkbox].css-checkbox { position: absolute;  overflow: hidden;  clip: rect(0 0 0 0);  height:1px;  width:1px;  margin:-1px;  padding:0; border:0; } 
input[type=checkbox].css-checkbox + label.css-label { padding-left:20px; height:15px;  display:inline-block; line-height:15px; background-repeat:no-repeat; background-position: 0 0; font-size:15px; vertical-align:middle; cursor:pointer; } 
input[type=checkbox].css-checkbox:checked + label.css-label { background-position: 0 -15px; }  .css-label{ background-image:url(http://csscheckbox.com/checkboxes/lite-x-red.png); }
</style>
<form>
<input id="demo_box_2" class="css-checkbox" type="checkbox" checked="checked" />
<label for="demo_box_2" name="demo_lbl_2" class="css-label">Selected Option</label>
</form>
</html>
aswanijagadesh1.397398535585991E12aswanijagadesh1.397398535585991E12
will any one try this please urgent