Styling Checkboxes for Drupal 7 Webform 4

By cindy 27 / Apr / 2015

So, your designers have come up with a design to give the form checkbox on your Drupal 7 site an updated look. You've come up with a prototype that incorporates the design and now you've found out it can be a bit tricky to implement in a Webform for Drupal.

Webform module has its own idea of style and has configurations and functions that are a little restrictive when it comes to front-end development.

This is the solution my team came up with.

Required modules: Webform 4 - which requires PHP 5.3, CTools, and Views 3, and Webform Boolean.

Create a Webform and add any fields needed by your form. Add a Boolean/Checkbox type field with whatever Label you like - keep in mind we'll be hiding the label and using the Description to get this to work.



Configure the Boolean/Checkbox component with the following:

  • Label can be anything at all, it won't be shown
  • Description - this is where you'll enter what will appear to label for the checkbox

 
  • Display -> Label display must be Inline
  • Wrapper CSS classes - give this component a class so you can target the input label and field in the jQuery and CSS

This then, is the HTML output of the Boolean Checkbox:

<div class="checkbox__input form-item webform-component webform-component-boolean webform-component--field-key-name webform-container-inline">

  <label for="edit-submitted-field-key-name">Checkbox Label</label>

  <div id="edit-submitted-field-key-name" class="form-checkboxes webform">

    <input class="webform form-checkbox" type="checkbox" id="edit-submitted-field-key-name" name="submitted[field_key-name]" value="1" />

  </div>

  <div class="description">The Description tells the user what is being selected by checking this box.</div>

</div>

 

Here's the jQuery we need:

​(function ($) {
  /* Checkbox */
  Drupal.behaviors.checkbox = {
    attach: function (context, settings) {
    
      // unbind() kept my script from firing twice
     $('.checkbox__input label').unbind();

      $('.checkbox__input label').on('click', function(event) {

        // add a class when the label is clicked so that we can style it
        $(this).toggleClass('checked');

        event.preventDefault();
 
        // because we’re clicking the label for a boolean checkbox, we need to execute the handler as if the event were triggered on the natural checkbox
        $('input[type=checkbox]').trigger('click');

       });
    }
  };
})(jQuery);

 

Add the CSS that makes the magic happen:

.webform-component-boolean {
  margin-bottom: 1em;
  width: 100%;
  position: relative;
  float: left;
  line-height: 100%;
}

.webform-component-boolean label {
  // so that the user knows there is interactivity
  cursor: pointer;
  background: #425058;
  // places the background on top of the natural checkbox
  position: absolute;
  // prevents Label text from showing outside the background
  overflow: hidden;
   top: 0;
  left: 4px;
  width: 30px;
  height: 30px; 
}

.webform-component-boolean label:after {
  opacity: 0;
  content: '';
  position: absolute;
  width: 16px;
  height: 10px;
  background: transparent;
  top: 4px;
  left: 5px;
}

// this makes the checkmark appear on hover to let the user know that this is a checkbox
.webform-component-boolean label:hover::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 10px;
  background: transparent;
  top: 4px;
  left: 5px;
  // border and transform form the checkmark 
  border: 4px solid #fcfff4;
  border-top: none;
  border-right: none;
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  // light opacity gives the indication that clicking will create a checked box
  opacity: 0.3;
}

.webform-component-boolean label.checked:after {
  // full opacity of the checkmark when the checked class is applied
  opacity: 1;
}

Article tags: