Styling Checkboxes for Drupal 7 Webform 4

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 class="description">The Description tells the user what is being selected by checking this box.</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

        // 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



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: