-
ResumeProductsAsked on January 20, 2020 at 6:15 PM
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:
-
Elton Support Team LeadReplied on January 20, 2020 at 9:24 PM
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:
-
ResumeProductsReplied on January 21, 2020 at 4:13 PM
Whenever I inject code, all my boxes disappear:
-
Elton Support Team LeadReplied on January 21, 2020 at 5:40 PM
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
-
ResumeProductsReplied on January 21, 2020 at 6:08 PM
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?
-
Elton Support Team LeadReplied on January 21, 2020 at 8:30 PM
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
-
ResumeProductsReplied on January 22, 2020 at 2:08 PM
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?
-
Mike_G JotForm SupportReplied on January 22, 2020 at 4:32 PM
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.
-
Elton Support Team LeadReplied on January 22, 2020 at 4:48 PM
@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: