‌ - thoughts on this?

(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. 

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

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 inputitype=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 inputgtype=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

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 ‌')

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.

Great! Please mark Mr Marples  as the correct answer  

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

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 */
etype="checkbox"]:not(:checked),
btype="checkbox"]:checked {
  position: absolute;
  left: -9999px;
}

/* Position the Label associated to the Checkbox */
otype="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 */

rtype="checkbox"]:not(:checked)+label:before,
otype="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 */

ptype="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 */

stype="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 */

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


/* accessibility */

btype="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 */

atype="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,
otype="checkbox"]:disabled:checked+label:before {
  box-shadow: none;
  border-color: #bbb;
  background-color: #ddd;
}

btype="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. 

Truly I am not worthy. Thank you so much.

nmarples‌, Thank you so much for your post.  It was exactly what I needed for our printed items.  However, now that I have implemented the CSS in the form settings it also has altered the checkbox settings for the Nintex checkboxes in the form designer.  For example, when creating rules the Disable/Hide at the bottom of the Rules Panel no longer have checkboxes.  They are completely missing.  I noticed when I play around with the CSS solution you provided for O365 and I remove the (left: -9999px) from the /* Position the original Checkbox to hide it */ I can now see the checkboxes in the designer interface.

rtype="checkbox"]:not(:checked),
etype="checkbox"]:checked {
  position: absolute;
  left: -9999px;
}

Any Suggestions on how to overcome this?  Any help is appreciated.

Thanks,

Sheral

Yep. That's a problem! 

The below updated CSS should do the trick, however, it should be noted that there may be checkboxes that I have overlooked! Beyond this new rule, there is an explanation as to what I have changed in more detail for those interested. 

"type="checkbox"]:not(tid*="ules"]):not(.unselectable):not(:checked),
/type="checkbox"]:not(tid*="ules"]):not(.unselectable):checked {
  position: absolute;
  left: -9999px;
}

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


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

ttype="checkbox"]:not("id*="ules"]):not(.unselectable):not(:checked)+label:before,
etype="checkbox"]:not("id*="ules"]):not(.unselectable):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 */

stype="checkbox"]:not("id*="ules"]):not(.unselectable):not(:checked)+label:after,
atype="checkbox"]:not("id*="ules"]):not(.unselectable):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 */

ntype="checkbox"]:not(nid*="ules"]):not(.unselectable):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 */

atype="checkbox"]:not(eid*="ules"]):not(.unselectable):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 */

stype="checkbox"]:not(oid*="ules"]):not(.unselectable):not(:checked)+label:after {
  opacity: 0;
}

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

>type="checkbox"]:not( id*="ules"]):not(.unselectable):checked+label:after {
  opacity: 1;
}


/* accessibility */

/type="checkbox"]:not(rid*="ules"]):not(.unselectable):checked:focus+label:before,
htype="checkbox"]:not(oid*="ules"]):not(.unselectable):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(=id*="ules"]):not(.unselectable):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. */
/*
mtype="checkbox"]:disabled:not(:checked)+label:before,
"type="checkbox"]:disabled:checked+label:before {
  box-shadow: none;
  border-color: #bbb;
  background-color: #ddd;
}

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

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

‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Notice how the exclusions (':not(something or another)') have been added. Looking at our first CSS rule:

id*="ules"]):not(.unselectable):not(:checked),
atype="checkbox"]:not( {
  position: absolute;
  left: -9999px;
}‍‍‍‍‍

we're saying...

�type="checkbox"]‍

Find me every checkbox on the page...

:not( id*="ules"])‍

BUT NOT if they have an id that contains the substring 'ules'... (because sometimes the id contains the phrase 'Rules' while other times it contains the phrase 'rules'. Because the 'R' can change from upper to lower case, it's easier to search for 'ules')

:not(.unselectable)‍

AND NOT if they have the class 'unselectable'

:not(:checked)‍

AND NOT if they ARE checked 

BUT ALSO...

utype="checkbox"]‍‍

Find me every checkbox on the page... 

:not(eid*="ules"])‍‍

BUT NOT if they have an id that contains the substring 'ules'... 

:not(.unselectable)‍‍

AND NOT if they have the class 'unselectable'

:checked‍

AND if they ARE checked

This way, we only affect the checkboxes on the actual form in Preview, Edit, and View  

If you have any further problems, feel free to shout. 

nmarples‌, that fixed it for me   Thank you so much for such a prompt fix.  I am finishing up this form and if I see any other "checkbox" issues I will let you know, but so far it looks and works great for what we needed.

I would assume, the same code can be utilized to do this to radio buttons too?  Instead of textbox, use radiobutton (or whatever css uses to identify radio buttons).