How to make the product selection check-off boxes in a red round box.

3. Somewhere I saw that I can make the product selection check-off boxes in a red round box. How do I do that?

Example:

You can inject the following CSS codes to your form to customize the checkboxes no the payment field.

[data-type="control_paypal"] input[type="checkbox"] {

 -webkit-appearance:none;

 height:20px;

 width:20px;

 cursor:pointer;

 position:relative;

 -webkit-transition: .15s;

 border-radius:2em;

 background-color:transparent;

 border:1px solid red;

}

[data-type="control_paypal"] input[type="checkbox"]:checked, input[type="checkbox"]:focus {

 background-color:transparent;

 border:1px solid red;

 outline:0;

}

[data-type="control_paypal"] input[type="checkbox"]:checked:before {

 content: '✔';

 font-size:16px;

 font-weight:bold;

 position:relative;

 top:-2px;

 left:2px;

line-height:18px;

 color:#00880c;

 height:10px;

 width:10px;

}

[data-type="control_paypal"] input[type="checkbox"]:hover:before {

 background:rgba(255,255,255,0.3);

}

Guide: How to Inject Custom CSS Codes

Result:

Whenever I inject code, all my boxes disappear:

It worked fine for me. Please try it again and make sure to copy all the highlighted codes and paste it at the very bottom. That code will only affect the checkboxes on the payment field, nothing else.

Here's my cloned form: https://form.jotform.com/200206794255958

Oh I see, you're saying to paste the code UNDER the list that is already there, I was selecting and pasting over it. I just did that and it worked. However when I'm in preview mode, it's not letting me check off the boxes, it comes up like this:

Also they broke up my requests and I was also given other codes for spacing and font changes. What would I do with the other codes? Paste them below as well?

I assume you're not using Windows OS that's why the checkmark was replaced with a question mark, which means your system doesn't support the checkmark symbol. Anyway, I changed the checkbox CSS code to avoid any browser compatibility issue. It should be fine by now. The CSS is a bit lengthy so I changed it for your convenience.

[data-type="control_paypal"] input[type="checkbox"] {opacity: 0; width: 0; margin: 0; padding: 0; } [data-type="control_paypal"] .form-checkbox + label:before {border: 2px solid #ff0000; } [data-type="control_paypal"] .form-checkbox + label:before {content: ''; position: absolute; display: inline-block; vertical-align: baseline; margin-right: 4px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; left: 0; top:6px; width: 18px; height: 18px; cursor: pointer; } [data-type="control_paypal"] .form-checkbox:checked + label:after {opacity: 1; } [data-type="control_paypal"] .form-checkbox + label:after {background-color: #ff0000; box-shadow: 0 2px 0 0 #ff0000, 2px 2px 0 0 #ff0000, 4px 2px 0 0 #ff0000, 6px 2px 0 0 #ff0000; -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } [data-type="control_paypal"] .form-checkbox + label:after {content: ''; position: absolute; z-index: 10; display: inline-block; opacity: 0; top: 14px; left: 4px; width: 3px; height: 3px; } .form-product-item label{position:relative; padding-left: 30px; }

.form-product-item img + .form-product-item-detail label[for*="input_7_100"]:before,

.form-product-item img + .form-product-item-detail label[for*="input_7_100"]:after

{display:none !important;}

Result:

Can you check your form this time?

To answer your question, yes, you always have to paste them at the very bottom.

Thanks

The above image looks good but that's not what it is showing in preview mode (I'm still getting the ?). I'm on a Mac. Also I wasn't able to view it on my phone any more as the screen doesn't scroll down. What now?

I have checked your form on a Safari browser and here's what I am seeing on my end.

Here's the version of the Safari browser that I have used in my test.

Please allow us some time to inspect this further, we will get back to you as soon as possible.

@ResumeProducts

It seems like my changes weren't saved so your form still has my old CSS for the checkboxes which I've updated again just now. Could you please check your form again https://form.jotform.com/200164161802139?

It should appear like this now: