Skip to Content (Press Enter)
2019-11-22 10-08-15
Helio Pimenta
146Views
1Comments
Custom checkbox
Question
Hi everyone,
 
I’m trying to customize a checkbox using just CSS (example: https://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
0
0
10 Jan 2013
Copy Link
2022-11-12 11-28-30
Gonçalo Martins
Staff
Helio Pimenta wrote:
Hi everyone,
 
I’m trying to customize a checkbox using just CSS (example: https://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
0
0
10 Jan 2013
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.