How can I change the Appearance of the checkboxes in Nintex forms

[claytoncatching]

Hello everyone,

   I have been running into some issues trying to alter the appearance of the checkboxes nintex uses.  The checkboxes in the edit view of the form are easy enough to see, but the check-boxes in the view mode are grey boxes on a grey background and we need a higher contrast option.  I know checkboxes can normally be altered using css classes, but i am not sure how to do this for nintex.  This link basically discusses what i would like to do.  http://www.inserthtml.com/2012/06/custom-form-radio-checkbox/

Any assistance would be greatly appreciated.

[rhia]

‌ - thoughts on this?

[MegaJerk · Accepted solution]

(EDIT #2: A user found that the css in this answer results in hidden checkboxes inside of the Form Editor Interface! That is bad! Please see the answer here for a better rule that will only change the checkboxes on the Form in Edit, View, Print, or New)

(EDIT #1: When I originally wrote this post I did not see that this was using Nintex Forms for Office 365. I'm currently using on-premise, and while I believe that the only difference between the two is custom JavaScript usage, I think that this css only solution should work. I hope. maybe. I suppose we'll know soon enough!)

So using that tutorial that you posted, I was able to successfully change the checkbox into something with a little more contrast in view mode. 

Before we get to the css, go on and apply a custom class to your checkbox as shown: 

In this instance, my class name is 'custom-checkbox'.

Now you'll add the css code at the top of the css in the Settings menu.

So. Copy this: 

.custom-checkbox input {
  -webkit-appearance: none;
  background-color: #ffffff;
  border: 1px solid #7b7b7b;
  padding: 5px;
  border-radius: 3px;
}
.custom-checkbox input:checked {
  background-color: #e9ecee;
  color: #99a1a7;
}
.custom-checkbox input:checked:after {
  content: '\2714';
  font-size: 12px;
  position: absolute;
  top: 2px;
  left: 5px;
  color: black;
}
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

And then, paste it here: 

That should change things to make the contrast stick out just a little bit more than normal. 

This is what it looks like in Edit Mode (checked): 

And this is what it looks like in View Mode (unchecked): 

If you want to change the look further, you can simple change those color (hex) values to whatever colors you'd like! 

I hope this gets you going in the right direction. 

[rhia]

Hey ‌ - Does ‌'s answer help you out? If so, please mark as correct. Thanks!

[claytoncatching]

Hi All,

   Sorry for the delay, thank you nmarples for your suggestion and thank you Rhia Wieclawek

for drawing attention to my plight.  Using your suggestion and what I dug up on the tutorial this is what I came up with. 

 .custom-checkbox input[type=checkbox] {
       position:absolute; z-index:-1000; left:-1000px; overflow: hidden; clip: rect(0 0 0 0); height:1px; width:1px; margin:-1px; padding:0; border:0;
      }
          .custom-checkbox input[type=checkbox] + label {
       padding-left:19px;
       height:15px;
       display:inline-block;
       line-height:15px;
       background-repeat:no-repeat;
       background-position: 0 0;
       font-size:15px;
       vertical-align:middle;
       cursor:pointer;      }       .custom-checkbox input[type=checkbox]:checked + label {
       background-position: 0 -15px;
      }
       .custom-checkbox label {
    background-image:url(http://csscheckbox.com/checkboxes/u/csscheckbox_c5efc86a22c4b46407e846aec00e0518.png);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
   }

This gave me the desired result of pretty blue (apple esq) checkboxes.  Though I think i might try your solution as it does not rely on a web link.  I will let you know if it works

[rhia]

May I add your CSS to the CSS catalogue I am trying to build, ‌ if it works out? I will credit you. (I will also be adding ‌')

[claytoncatching]

You may, but I should add the first time I touched CSS was Friday so I honestly do not know what I am doing.  BTW I tested out .‌ solution and it certainly does the trick of creating the contrast, is much more elegant and does not rely on external resources.  The technique I have stumbled upon does give you the option of using a wide variety of different check boxes from www.csscheckbox.com  so I think both are good solutions.

[rhia]

Great! Please mark Mr Marples  as the correct answer  

[MegaJerk]

I threw together a quick test in jsfiddle to see if I could make something a little more MacOs-ish for you, but I'm not sure that this captures the exact spirit of the style. Ultimately though, it requires less external resources, and you can customize it to you heart's content!  

.custom-checkbox input {
  -webkit-appearance: none;
  background-color: #ffffff;
  border: 1px solid #7b7b7b;
  padding: 5px;
  border-radius: 3px;
  box-shadow: inset 0 1px 7px 2px #cacaca;
}

.custom-checkbox input:checked {
  background-color: #e9ecee;
  color: #99a1a7;
  box-shadow: inset 0 1px 7px 2px #b0d4f5;
}

.custom-checkbox input:checked:after {
  content: '\2714';
  font-size: 12px;
  position: absolute;
  top: 2px;
  left: 5px;
  color: black;
}
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Unchecked 

Checked

[MegaJerk]

clayton catching‌, ran into problems (Making changes to checkboxes part 2) with the initial solution that was proposed - finding that when printing out a form after changing the Checkboxes using the above method, nothing would be rendered!

This is problematic! 

Because of that, I am proposing an alternative solution. 

/* Position the original Checkbox to hide it */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
  position: absolute;
  left: -9999px;
}

/* Position the Label associated to the Checkbox */
[type="checkbox"]:not(:checked)+label,
[type="checkbox"]:checked+label {
  position: relative;
  padding-left: 1.5em;
  cursor: pointer;
}


/* Add an empty Check Box BEFORE our label content */

[type="checkbox"]:not(:checked)+label:before,
[type="checkbox"]:checked+label:before {
  content: '';
  position: absolute;
  left: 0;
  top: 3px;
  width: 12px;
  height: 12px;
  border: 1px solid #8d8d8d;
  background: #fff;
  border-radius: 3px;
}


/* Add a Checkmark Character AFTER our label content */

[type="checkbox"]:not(:checked)+label:after,
[type="checkbox"]:checked+label:after {
  content: '✔';
  position: absolute;
  top: 3px;
  left: 2px;
  font-size: 14px;
  line-height: 12px;
  color: black;
}


/* Checkbox - Not Checked: specific styling */
/* Now our UNCHECKED box has a nice box shadoow */

[type="checkbox"]:not(:checked)+label:before {
  box-shadow: inset 0 1px 7px 2px #cacaca;
}


/* Checkbox - Checked: specific styling*/
/* Now our CHECKED box has a nice blue box shadow */

[type="checkbox"]:checked+label:before {
  box-shadow: inset 0 1px 7px 2px #b0d4f5;
}


/* checked mark character changes */
/* This will hide the checkmark character 
  when the user has unchecked the box */

[type="checkbox"]:not(:checked)+label:after {
  opacity: 0;
}

/* This will make the checkmark character 
  visible when the user has checked the box */

[type="checkbox"]:checked+label:after {
  opacity: 1;
}


/* accessibility */

[type="checkbox"]:checked:focus+label:before,
[type="checkbox"]:not(:checked):focus+label:before {
  border: 1px solid #488fce;
}


/* When you Hover over the elemnts, This will create a
   nice obvious box shadow radiating from the checkbox. 

   NOTE: because we already have an inset box shadow on the 
   default :before pseudo element, we'll have to include it
   and then override it so that the look is consitent */

[type="checkbox"]:not(:disabled)+label:hover:before {
  box-shadow: inset 0 1px 7px 2px #cacaca, 0 0 4px #488fce !important;
  border: 1px solid #488fce !important;
}


/* disabled checkbox */
/* ENABLE THE BELOW CSS IF YOU'D LIKE YOUR CHECKBOXES
   TO LOOK DISABLED WHEN YOU ARE VIEWING YOUR FORM. */
/*
[type="checkbox"]:disabled:not(:checked)+label:before,
[type="checkbox"]:disabled:checked+label:before {
  box-shadow: none;
  border-color: #bbb;
  background-color: #ddd;
}

[type="checkbox"]:disabled:checked+label:after {
  color: #999;
}

[type="checkbox"]:disabled+label {
  color: #aaa;
}
*/‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

This code has been modified from this CodePen made by Geoffrey Crofte. 

The results will show as follows. 

Unchecked Hovered: 

Unchecked: 

Checked: 

Printed: 

I hope that this helps.