Customize the Radio buttons of payment field.

  • JeffHBM
    Asked 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 Manager
    Replied 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 

    1515692351larger Screenshot 10

  • David JotForm Support Manager
    Replied on January 11, 2018 at 1:37 PM

    Hi again, if you would like to make them look like the radio buttons above:

    46837 this 001 Screenshot 10

    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 

    1515695818done Screenshot 21

  • JeffHBM
    Replied on January 11, 2018 at 3:09 PM

    Notice that the circles do not line up evenly with the -MONTHLY....

    1515701295Screen Shot 2018 01 11 at 2 Screenshot 10

  • David JotForm Support Manager
    Replied 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:

    1515704733fixed 001 Screenshot 10

    Open a new thread if you need anything else, we will be glad to assist you.