CMS

Drupal 7 – Styling checkbox and radio button in Webform

18 Comments

Yesterday we talked about styling the checkbox and radio button as suggested by Ryan Fait.
Styling checkbox and radio button with CSS and Javascript

Here is a simple solution for applying the checkbox and radio button in Drupal 7 webform.

1. Upload the radio.png, checkbox.png and select.png to your subtheme. (Omega subtheme is used in this example.)

checkbox
radio
select

 

2. Add the following style in the theme css and update the <path>
.checkbox, .radio {
  width: 19px;
  height: 25px;
  padding: 1px 20px 0 0;
  background: url(<path>/checkbox.png) no-repeat;
}
.radio {
  background: url(<path>/radio.png) no-repeat;
}
.select {
  position: absolute;
  width: 158px;
  height: 21px;
  padding: 0 24px 0 8px;
  color: #fff;
  font: 12px/21px arial,sans-serif;
  background: url(<path>/select.png) no-repeat;
  overflow: hidden;
}

 

3. Download the custom-form-elements.js file @ Las Vegas Web Design (Click the Download the full script link)
 

4. Modify the custom-form-elements.js

/*

CUSTOM FORM ELEMENTS

Created by Ryan Fait
www.ryanfait.com

The only things you may need to change in this file are the following
variables: checkboxHeight, radioHeight and selectWidth (lines 24, 25, 26)

The numbers you set for checkboxHeight and radioHeight should be one quarter
of the total height of the image want to use for checkboxes and radio
buttons. Both images should contain the four stages of both inputs stacked
on top of each other in this order: unchecked, unchecked-clicked, checked,
checked-clicked.

You may need to adjust your images a bit if there is a slight vertical
movement during the different stages of the button activation.

The value of selectWidth should be the width of your select list image.

Visit http://ryanfait.com/ for more information.

*/

/**
 * Modified by ykyuen for Drupal 7
 * Url: http://eureka.ykyuen.info
 */

var checkboxHeight = "25";
var radioHeight = "25";
var selectWidth = "190";

/* No need to change anything after this */
document.write('<style type="text/css">input.form-radio, input.form-checkbox { display: none; } select.form-select { position: relative; width: ' + selectWidth + 'px; opacity: 0; filter: alpha(opacity=0); z-index: 5; } .disabled { opacity: 0.5; filter: alpha(opacity=50); }</style>');

var Custom = {
  init: function() {
    var inputs = document.getElementsByTagName("input"), span = Array(), textnode, option, active;
    for(a = 0; a < inputs.length; a++) {
      if((inputs[a].type == "checkbox" || inputs[a].type == "radio") && (inputs[a].className == "form-checkbox" || inputs[a].className == "form-radio" || inputs[a].className == "form-checkbox error" || inputs[a].className == "form-radio error")) {
        span[a] = document.createElement("span");
        span[a].className = inputs[a].type;

        if(inputs[a].checked == true) {
          if(inputs[a].type == "checkbox") {
            position = "0 -" + (checkboxHeight*2) + "px";
            span[a].style.backgroundPosition = position;
          } else {
            position = "0 -" + (radioHeight*2) + "px";
            span[a].style.backgroundPosition = position;
          }
        }
        inputs[a].parentNode.insertBefore(span[a], inputs[a]);
        inputs[a].onchange = Custom.clear;
        if(!inputs[a].getAttribute("disabled")) {
          span[a].onmousedown = Custom.pushed;
          span[a].onmouseup = Custom.check;
        } else {
          span[a].className = span[a].className += " disabled";
        }
      }
    }
    inputs = document.getElementsByTagName("select");
    for(a = 0; a < inputs.length; a++) {
      if(inputs[a].className == "form-select") {
        option = inputs[a].getElementsByTagName("option");
        active = option[0].childNodes[0].nodeValue;
        textnode = document.createTextNode(active);
        for(b = 0; b < option.length; b++) {
          if(option[b].selected == true) {
            textnode = document.createTextNode(option[b].childNodes[0].nodeValue);
          }
        }
        span[a] = document.createElement("span");
        span[a].className = "select";
        span[a].id = "select" + inputs[a].name;
        span[a].appendChild(textnode);
        inputs[a].parentNode.insertBefore(span[a], inputs[a]);
        if(!inputs[a].getAttribute("disabled")) {
          inputs[a].onchange = Custom.choose;
        } else {
          inputs[a].previousSibling.className = inputs[a].previousSibling.className += " disabled";
        }
      }
    }
    document.onmouseup = Custom.clear;
  },
  pushed: function() {
    element = this.nextSibling;
    if(element.checked == true && element.type == "checkbox") {
      this.style.backgroundPosition = "0 -" + checkboxHeight*3 + "px";
    } else if(element.checked == true && element.type == "radio") {
      this.style.backgroundPosition = "0 -" + radioHeight*3 + "px";
    } else if(element.checked != true && element.type == "checkbox") {
      this.style.backgroundPosition = "0 -" + checkboxHeight + "px";
    } else {
      this.style.backgroundPosition = "0 -" + radioHeight + "px";
    }
  },
  check: function() {
    element = this.nextSibling;
    if(element.checked == true && element.type == "checkbox") {
      this.style.backgroundPosition = "0 0";
      element.checked = false;
    } else {
      if(element.type == "checkbox") {
        this.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
      } else {
        this.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
        group = this.nextSibling.name;
        inputs = document.getElementsByTagName("input");
        for(a = 0; a < inputs.length; a++) {
          if(inputs[a].name == group && inputs[a] != this.nextSibling) {
            inputs[a].previousSibling.style.backgroundPosition = "0 0";
          }
        }
      }
      element.checked = true;
    }
  },
  clear: function() {
    inputs = document.getElementsByTagName("input");
    for(var b = 0; b < inputs.length; b++) {
      if(inputs[b].type == "checkbox" && inputs[b].checked == true && (inputs[b].className == "form-checkbox" || inputs[b].className == "form-checkbox error")) {
        inputs[b].previousSibling.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
      } else if(inputs[b].type == "checkbox" && (inputs[b].className == "form-checkbox" || inputs[b].className == "form-checkbox error")) {
        inputs[b].previousSibling.style.backgroundPosition = "0 0";
      } else if(inputs[b].type == "radio" && inputs[b].checked == true && (inputs[b].className == "form-radio" || inputs[b].className == "form-radio error")) {
        inputs[b].previousSibling.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
      } else if(inputs[b].type == "radio" && (inputs[b].className == "form-radio" || inputs[b].className == "form-radio error")) {
        inputs[b].previousSibling.style.backgroundPosition = "0 0";
      }
    }
  },
  choose: function() {
    option = this.getElementsByTagName("option");
    for(d = 0; d < option.length; d++) {
      if(option[d].selected == true) {
        document.getElementById("select" + this.name).childNodes[0].nodeValue = option[d].childNodes[0].nodeValue;
      }
    }
  }
}

 

5. Upload the above js file to sites/all/themes/<theme name>/js
 

6. Add the following line in your <theme name>.info

scripts[] = js/custom-form-elements.js

 

7. Copy the html.tpl.php from the Omega theme folder to your Omega subtheme folder and add the Custom.init() in body onload
– This is the html.tpl.php of Omega subtheme

<?php print $doctype; ?>
<html lang="<?php print $language->language; ?>" dir="<?php print $language->dir; ?>"<?php print $rdf->version . $rdf->namespaces; ?>>
<head<?php print $rdf->profile; ?>>
  <?php print $head; ?>
  <title><?php print $head_title; ?></title>
  <?php print $styles; ?>
  <?php print $scripts; ?>
  <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body<?php print $attributes;?> onLoad="javascript:Custom.init();">
  <div id="skip-link">
    <a href="#main-content" class="element-invisible element-focusable"><?php print t('Skip to main content'); ?></a>
  </div>
  <?php print $page_top; ?>
  <?php print $page; ?>
  <?php print $page_bottom; ?>
</body>
</html>

 

8. Clear the Drupal cache and your webform components should be styled.
 

Done =)

Reference:

18 thoughts on “Drupal 7 – Styling checkbox and radio button in Webform”

  1. Thanks for this, it’s actually exactly what I was looking for – I’m even using a sub theme of Omega on D7! It’s not working at all and I can’t figure out why. just wondering if your markup is the same as my webform has been changed about a bit by a developer – my html for each radio btn looks like this:

    Year 11

    Like

    Reply

    1. If you want to post the code, please follow the Syntax Highlight

      I can’t read the code of your last comment. can you post again?

      And can you elaborate more about how is it not working? Do u mean that the radio button images cannot be shown?

      Like

      Reply

      1. Ooops, here you go: Thanks. I don’t think the script is working because the classes are not being applied.

        <div class="form-item form-type-radio form-item-submitted-civicrm-1-contact-1-fieldset-fieldset-basic-info-civicrm-1-contact-1-cg2-custom-12">
<input type="radio" id="edit-submitted-civicrm-1-contact-1-fieldset-fieldset-basic-info-civicrm-1-contact-1-cg2-custom-12-1" name="submitted[civicrm_1_contact_1_fieldset_fieldset][basic_info][civicrm_1_contact_1_cg2_custom_12]" value="eleven" class="form-radio"> 
<label class="option" for="edit-submitted-civicrm-1-contact-1-fieldset-fieldset-basic-info-civicrm-1-contact-1-cg2-custom-12-1">Year 11</label>
</div>

        Like

      3. Yeah, I can see

        onLoad="javascript:custom.init();

        I’m assuming from the css that a class of “radio” is supposed to be getting added to my inputs, is that right? Have you got a demo of this up anywhere please?

        Thanks a lot

        Like

      4. If the code works, the radio input will be set to display: none; and a span with be inserted before the input.

        here is an example after the code is run.

        <div id="webform-component-gender" class="form-item webform-component webform-component-radios">
  <label for="edit-submitted-gender">Gender</label>
  <div class="form-radios" id="edit-submitted-gender">
    <div class="form-item form-type-radio form-item-submitted-gender">
      <span class="radio" style="background-position: 0pt -50px;"></span>
      <input type="radio" class="form-radio" value="m" name="submitted[gender]" id="edit-submitted-gender-1">
      <label for="edit-submitted-gender-1" class="option">M</label>
    </div>
    <div class="form-item form-type-radio form-item-submitted-gender">
      <span class="radio" style="background-position: 0pt 0pt;"></span>
      <input type="radio" class="form-radio" value="f" name="submitted[gender]" id="edit-submitted-gender-2">
      <label for="edit-submitted-gender-2" class="option">F</label>
    </div>
  </div>
</div>

         

        Could u add some alert(“message”); in the js file and see if it runs well? Also you can make use of the console in Chrome to check if there is any js error.

        Like

  2. Hi,

    Great tutorial, thankyou so much. I’m new to Drupal and its a steep learning curve.

    Do you think you could give me some guidance on removing the select function form the styling. (i.e. I do not want the select (drop down) boxes to be styled).

    Cheers,
    Alex

    Like

    Reply

    1. Use the following piece of code.

      /*

CUSTOM FORM ELEMENTS

Created by Ryan Fait
www.ryanfait.com

The only things you may need to change in this file are the following
variables: checkboxHeight, radioHeight and selectWidth (lines 24, 25, 26)

The numbers you set for checkboxHeight and radioHeight should be one quarter
of the total height of the image want to use for checkboxes and radio
buttons. Both images should contain the four stages of both inputs stacked
on top of each other in this order: unchecked, unchecked-clicked, checked,
checked-clicked.

You may need to adjust your images a bit if there is a slight vertical
movement during the different stages of the button activation.

The value of selectWidth should be the width of your select list image.

Visit http://ryanfait.com/ for more information.

*/

/**
 * Modified by ykyuen for Drupal 7
 * Url: http://eureka.ykyuen.info
 */

var checkboxHeight = "25";
var radioHeight = "25";
var selectWidth = "190";

/* No need to change anything after this */
document.write('input.form-radio, input.form-checkbox { display: none; } .disabled { opacity: 0.5; filter: alpha(opacity=50); }');

var Custom = {
  init: function() {
    var inputs = document.getElementsByTagName("input"), span = Array(), textnode, option, active;
    for(a = 0; a < inputs.length; a++) {
      if((inputs[a].type == "checkbox" || inputs[a].type == "radio") && (inputs[a].className == "form-checkbox" || inputs[a].className == "form-radio" || inputs[a].className == "form-checkbox error" || inputs[a].className == "form-radio error")) {
        span[a] = document.createElement("span");
        span[a].className = inputs[a].type;

        if(inputs[a].checked == true) {
          if(inputs[a].type == "checkbox") {
            position = "0 -" + (checkboxHeight*2) + "px";
            span[a].style.backgroundPosition = position;
          } else {
            position = "0 -" + (radioHeight*2) + "px";
            span[a].style.backgroundPosition = position;
          }
        }
        inputs[a].parentNode.insertBefore(span[a], inputs[a]);
        inputs[a].onchange = Custom.clear;
        if(!inputs[a].getAttribute("disabled")) {
          span[a].onmousedown = Custom.pushed;
          span[a].onmouseup = Custom.check;
        } else {
          span[a].className = span[a].className += " disabled";
        }
      }
    }
    /*
    inputs = document.getElementsByTagName("select");
    for(a = 0; a < inputs.length; a++) {
      if(inputs[a].className == "form-select") {
        option = inputs[a].getElementsByTagName("option");
        active = option[0].childNodes[0].nodeValue;
        textnode = document.createTextNode(active);
        for(b = 0; b < option.length; b++) {
          if(option[b].selected == true) {
            textnode = document.createTextNode(option[b].childNodes[0].nodeValue);
          }
        }
        span[a] = document.createElement("span");
        span[a].className = "select";
        span[a].id = "select" + inputs[a].name;
        span[a].appendChild(textnode);
        inputs[a].parentNode.insertBefore(span[a], inputs[a]);
        if(!inputs[a].getAttribute("disabled")) {
          inputs[a].onchange = Custom.choose;
        } else {
          inputs[a].previousSibling.className = inputs[a].previousSibling.className += " disabled";
        }
      }
    }
    */
    document.onmouseup = Custom.clear;
  },
  pushed: function() {
    element = this.nextSibling;
    if(element.checked == true && element.type == "checkbox") {
      this.style.backgroundPosition = "0 -" + checkboxHeight*3 + "px";
    } else if(element.checked == true && element.type == "radio") {
      this.style.backgroundPosition = "0 -" + radioHeight*3 + "px";
    } else if(element.checked != true && element.type == "checkbox") {
      this.style.backgroundPosition = "0 -" + checkboxHeight + "px";
    } else {
      this.style.backgroundPosition = "0 -" + radioHeight + "px";
    }
  },
  check: function() {
    element = this.nextSibling;
    if(element.checked == true && element.type == "checkbox") {
      this.style.backgroundPosition = "0 0";
      element.checked = false;
    } else {
      if(element.type == "checkbox") {
        this.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
      } else {
        this.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
        group = this.nextSibling.name;
        inputs = document.getElementsByTagName("input");
        for(a = 0; a < inputs.length; a++) {
          if(inputs[a].name == group && inputs[a] != this.nextSibling) {
            inputs[a].previousSibling.style.backgroundPosition = "0 0";
          }
        }
      }
      element.checked = true;
    }
  },
  clear: function() {
    inputs = document.getElementsByTagName("input");
    for(var b = 0; b < inputs.length; b++) {
      if(inputs[b].type == "checkbox" && inputs[b].checked == true && (inputs[b].className == "form-checkbox" || inputs[b].className == "form-checkbox error")) {
        inputs[b].previousSibling.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
      } else if(inputs[b].type == "checkbox" && (inputs[b].className == "form-checkbox" || inputs[b].className == "form-checkbox error")) {
        inputs[b].previousSibling.style.backgroundPosition = "0 0";
      } else if(inputs[b].type == "radio" && inputs[b].checked == true && (inputs[b].className == "form-radio" || inputs[b].className == "form-radio error")) {
        inputs[b].previousSibling.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
      } else if(inputs[b].type == "radio" && (inputs[b].className == "form-radio" || inputs[b].className == "form-radio error")) {
        inputs[b].previousSibling.style.backgroundPosition = "0 0";
      }
    }
  },
  /*
  choose: function() {
    option = this.getElementsByTagName("option");
    for(d = 0; d < option.length; d++) {
      if(option[d].selected == true) {
        document.getElementById("select" + this.name).childNodes[0].nodeValue = option[d].childNodes[0].nodeValue;
      }
    }
  }
  */
}

      Like

      Reply

      1. Hi

        Thanks for the quick reply, when I add that code, the non-styled checkboxes and radio buttons appear, as well as the styled ones… any ideas?

        Like

      2. For Drupal 7 webform, the checkbox and radio button has default class and they will be hidden by

        /* No need to change anything after this */
document.write('input.form-radio, input.form-checkbox { display: none; } .disabled { opacity: 0.5; filter: alpha(opacity=50); }');

         

        Do your checkbox and radio button have the .form-radio and .form-checkbox classes?

        Like

      3. Managed to sort it out by using this code slightly different from what you gave me, thanks your your help.

        /*

CUSTOM FORM ELEMENTS

Created by Ryan Fait
www.ryanfait.com

The only things you may need to change in this file are the following
variables: checkboxHeight, radioHeight and selectWidth (lines 24, 25, 26)

The numbers you set for checkboxHeight and radioHeight should be one quarter
of the total height of the image want to use for checkboxes and radio
buttons. Both images should contain the four stages of both inputs stacked
on top of each other in this order: unchecked, unchecked-clicked, checked,
checked-clicked.

You may need to adjust your images a bit if there is a slight vertical
movement during the different stages of the button activation.

The value of selectWidth should be the width of your select list image.

Visit http://ryanfait.com/ for more information.

*/

/**
 * Modified by ykyuen for Drupal 7
 * Url: http://eureka.ykyuen.info
 */

var checkboxHeight = "25";
var radioHeight = "25";

/* No need to change anything after this */
document.write('input.form-radio, input.form-checkbox { display: none; } .disabled { opacity: 0.5; filter: alpha(opacity=50); }');

var Custom = {
  init: function() {
    var inputs = document.getElementsByTagName("input"), span = Array(), textnode, option, active;
    for(a = 0; a < inputs.length; a++) {
      if((inputs[a].type == 'checkbox' || inputs[a].type == 'radio') && (inputs[a].className == 'form-checkbox' || inputs[a].className == 'form-radio' || inputs[a].className == 'form-checkbox error' || inputs[a].className == 'form-radio error')) {
        span[a] = document.createElement('span');
        span[a].className = inputs[a].type;

        if(inputs[a].checked == true) {
          if(inputs[a].type == 'checkbox') {
            position = '0 -' + (checkboxHeight*2) + 'px';
            span[a].style.backgroundPosition = position;
          } else {
            position = '0 -' + (radioHeight*2) + 'px';
            span[a].style.backgroundPosition = position;
          }
        }
        inputs[a].parentNode.insertBefore(span[a], inputs[a]);
        inputs[a].onchange = Custom.clear;
        if(!inputs[a].getAttribute('disabled')) {
          span[a].onmousedown = Custom.pushed;
          span[a].onmouseup = Custom.check;
        } else {
          span[a].className = span[a].className += ' disabled';
        }
      }
    }
    /*inputs = document.getElementsByTagName('select');
    for(a = 0; a < inputs.length; a++) {
      if(inputs[a].className == 'form-select') {
        option = inputs[a].getElementsByTagName('option');
        active = option[0].childNodes[0].nodeValue;
        textnode = document.createTextNode(active);
        for(b = 0; b < option.length; b++) {
          if(option[b].selected == true) {
            textnode = document.createTextNode(option[b].childNodes[0].nodeValue);
          }
        }
        span[a] = document.createElement('span');
        span[a].className = 'select';
        span[a].id = 'select' + inputs[a].name;
        span[a].appendChild(textnode);
        inputs[a].parentNode.insertBefore(span[a], inputs[a]);
        if(!inputs[a].getAttribute('disabled')) {
          inputs[a].onchange = Custom.choose;
        } else {
          inputs[a].previousSibling.className = inputs[a].previousSibling.className += ' disabled';
        }
      }
    }*/
    document.onmouseup = Custom.clear;
  },
  pushed: function() {
    element = this.nextSibling;
    if(element.checked == true s& element.type == 'checkbox') {
      this.style.backgroundPosition = '0 -' + checkboxHeight*3 + 'px';
    } else if(element.checked == true && element.type == 'radio') {
      this.style.backgroundPosition = '0 -' + radioHeight*3 + 'px';
    } else if(element.checked != true && element.type == 'checkbox') {
      this.style.backgroundPosition = '0 -' + checkboxHeight + 'px';
    } else {
      this.style.backgroundPosition = '0 -' + radioHeight + 'px';
    }
  },
  check: function() {
    element = this.nextSibling;
    if(element.checked == true && element.type == 'checkbox') {
      this.style.backgroundPosition = '0 0';
      element.checked = false;
    } else {
      if(element.type == 'checkbox') {
        this.style.backgroundPosition = '0 -' + checkboxHeight*2 + 'px';
      } else {
        this.style.backgroundPosition = '0 -' + radioHeight*2 + 'px';
        group = this.nextSibling.name;
        inputs = document.getElementsByTagName('input');
        for(a = 0; a < inputs.length; a++) {
          if(inputs[a].name == group && inputs[a] != this.nextSibling) {
            inputs[a].previousSibling.style.backgroundPosition = '0 0';
          }
        }
      }
      element.checked = true;
    }
  },
  clear: function() {
    inputs = document.getElementsByTagName('input');
    for(var b = 0; b < inputs.length; b++) {
      if(inputs[b].type == 'checkbox' && inputs[b].checked == true && (inputs[b].className == 'form-checkbox' || inputs[b].className == 'form-checkbox error')) {
        inputs[b].previousSibling.style.backgroundPosition = '0 -' + checkboxHeight*2 + 'px';
      } else if(inputs[b].type == 'checkbox' && (inputs[b].className == 'form-checkbox' || inputs[b].className == 'form-checkbox error')) {
        inputs[b].previousSibling.style.backgroundPosition = '0 0';
      } else if(inputs[b].type == 'radio' && inputs[b].checked == true && (inputs[b].className == 'form-radio' || inputs[b].className == 'form-radio error')) {
        inputs[b].previousSibling.style.backgroundPosition = '0 -' + radioHeight*2 + 'px';
      } else if(inputs[b].type == 'radio' && (inputs[b].className == 'form-radio' || inputs[b].className == 'form-radio error')) {
        inputs[b].previousSibling.style.backgroundPosition = '0 0';
      }
    }
  }
  /*choose: function() {
    option = this.getElementsByTagName('option');
    for(d = 0; d < option.length; d++) {
      if(option[d].selected == true) {
        document.getElementById('select' + this.name).childNodes[0].nodeValue = option[d].childNodes[0].nodeValue;
      }
    }
  }*/
}

        Like

  3. Hello again, sorry to bother you but I have another issue. I cant work out what is happening.

    Some checkboxes are begin displayed and some are not. This is the code generated by the one that is not being displayed

    
	
 	I accept the terms and conditions *

	Please read and agree to our Terms & Conditions

    and this is the markup that is generated for the checkboxes that are working

    
	
		
    	  KoolKidSpace news 

		I will accept relevant monthly promotional emails from KoolKidsSpace Ltd.

    Is the span tag not being generated on the first one because it is a required checkbox?

    Any help would be great thanks,
    Alex

    Like

    Reply

    1. woops those code snippets did not display

      <!-- 
	
 	I accept the terms and conditions *

	Please read and agree to our Terms & Conditions
 -->

<!-- 
	
		
    	  KoolKidSpace news 

		I will accept relevant monthly promotional emails from KoolKidsSpace Ltd.
	
 -->

      Like

      Reply

  4. Hello! First of big thanks for the tutorial! However i have a small problem with the customised checkboxes. They work perfectly as intended, however i want to use conditional field module in combination with checkbox for another field to appear when box is checked.
    After customizing the checkboxes using your method, the conditional field works only if user clicks directly on the option label ( not the checkbox itself!). I hope you understand what i mean, if someone clicks on checkbox it gets checked but the conditional field doesnt appear. But if someone clicks on the checkbox option label text then it gets checked and the conditional field appears.

    Im not sure whats causing the problem for the other field not appearing if you click directly on the checkbox, but if u click on checkbox label near it then it works. If you know how to overcome it id be very grateful! Best regards thanks.

    Like

    Reply

    1. i guess this is becoz the webform conditional field use js to check the checkbox input. but the solution in this post will hide the checkbox and show a span instead. so it didn’t trigger the js code for the conditional field.

      i suggest you can look into webform_conditional.js and see how the conditional field is triggered. and you can try to write your own js code to hide and show the conditional field.

      hope this help. =D

      Like

      Reply

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.