Custom checkbox

  
Hi everyone,
 
I’m trying to customize a checkbox using just CSS (example: http://jsfiddle.net/f5buA/)
 
<div class="foscheck">
            <input type="checkbox" name="wt9$wtMainContent$wtfos1" id="wt9_wtMainContent_wtfos1" class="foscheck-input">
 
            <span style="display: none;" class="ValidationMessage" id="ValidationMessage_wt9_wtMainContent_wtfos1"></span>
 
            <label for="wt9_wtMainContent_wtfos1"></label>
</div>
 
But in order for it to work I need to (1) remove the span tag  or  (2) have the label tag before the span tag.
 
Does anyone know how I can do this?
 
Thanks in advance
Helio Pimenta wrote:
Hi everyone,
 
I’m trying to customize a checkbox using just CSS (example: http://jsfiddle.net/f5buA/)
 
<div class="foscheck">
            <input type="checkbox" name="wt9$wtMainContent$wtfos1" id="wt9_wtMainContent_wtfos1" class="foscheck-input">
 
            <span style="display: none;" class="ValidationMessage" id="ValidationMessage_wt9_wtMainContent_wtfos1"></span>
 
            <label for="wt9_wtMainContent_wtfos1"></label>
</div>
 
But in order for it to work I need to (1) remove the span tag  or  (2) have the label tag before the span tag.
 
Does anyone know how I can do this?
 
Thanks in advance
 
 Hi Hélio,

Welcome to our community.
To change the order of the elements you can do this, using jQuery:

      var myElemSpan = $('#wt9_wtMainContent_wtfos1').next('span');
      var myElemLabel = $("label[for='wt9_wtMainContent_wtfos1']");
      
      myElemSpan.insertAfter(myElemLabel);


Best Regards,
Gonçalo Martins