-
JeffHBMAsked on January 11, 2018 at 12:19 PM
I would like to also make Custom form that would have "bolder" options like TW0 Large circle.
-
David JotForm Support ManagerReplied on January 11, 2018 at 12:39 PM
If you would like to increase the size of the circles, please inject this code:
.form-product-item-detail,.form-radio{
width: 18px;
height: 18px;
}
Result: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes
-
David JotForm Support ManagerReplied on January 11, 2018 at 1:37 PM
Hi again, if you would like to make them look like the radio buttons above:
Here is a custom code created by one of my colleagues, that will customize the buttons:
.form-product-item-detail .form-radio{
visibility : hidden !important;
}
.form-checkbox-item:not(#foo) input[type="checkbox"],
.form-radio-item:not(#foo) input[type="radio"] {
visibility: hidden;
}
.form-radio-item:not(#foo) label:after,
.form-radio-item:not(#foo) label:before {
border-radius: 50%;
}
.form-checkbox-item:not(#foo) label:after,
.form-checkbox-item:not(#foo) label:before {
border-radius : 0;
}
.form-radio-item:not(#foo) label:before,
.form-checkbox-item:not(#foo) label:before {
border-width:2px;
}
.form-radio-item:not(#foo),
.form-checkbox-item:not(#foo){
margin-bottom: 0;
position: relative;
}
/*-------------custom radio--------------*/
.form-radio: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%;
border: 2px solid #3498db;
width: 24px;
height: 24px;
cursor: pointer;
visibility: visible;
margin-top: -2px;
margin-left: -6px;
}
.form-radio:after {
content: '';
position: absolute;
z-index: 10;
display: inline-block;
opacity: 0;
top: 14px;
width: 12px;
height: 12px;
background-color: #3498db;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
cursor: pointer;
visibility: visible;
}
.form-radio:checked:after {
opacity: 1;
visibility: visible;
}
.form-product-item label {
margin-left: 5px;
}
Please inject it in your form as shown on this guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes
-
JeffHBMReplied on January 11, 2018 at 3:09 PM
Notice that the circles do not line up evenly with the -MONTHLY....
-
David JotForm Support ManagerReplied on January 11, 2018 at 4:06 PM
I believe you are referring to this form: https://form.jotform.com/80095758412157
I have fixed it:
Open a new thread if you need anything else, we will be glad to assist you.