Image radio button css

  • Profile Image
    valeriaanissina
    Asked on August 11, 2019 at 05:20 PM

    Hello,


    How can I edit image radio buttons?
    https://form.jotformeu.com/91427127122348

    For general radio buttons I use

    input[type=radio].form-radio {

        display : none;

    }


    input[type=radio].form-radio + label {

        padding-left : 26px;

        height : 22px;

        display : inline-block;

        line-height : 22px;

        background-repeat : no-repeat;

        background-position : 0 0;

        font-size : 17px;

        vertical-align : middle;

        cursor : pointer;

    }


    input[type=radio].form-radio:checked + label {

        background-position : 0 -22px;

    }


    input[type=radio] + label {

        background-image : url(#);

        -webkit-touch-callout : none;

        -webkit-user-select : none;

        -khtml-user-select : none;

        -moz-user-select : none;

        -ms-user-select : none;

        user-select : none;

    }


  • Profile Image
    jonathan
    Answered on August 11, 2019 at 07:44 PM

    Because the Image Radio button is a widget, it has its own custom CSS codes property.

    Check the user guide : How to Inject CSS Codes to Widgets

    You can inject your own custom CSS codes in the Custom CSS tab of widgets properties.

    Let us know if you need further assistance.




  • Profile Image
    valeriaanissina
    Answered on August 12, 2019 at 02:35 PM

    Thank you. for this.


    Unfortunately, I am not sure what to include as id or class in the css field for widget to change the radio buttons :(

  • Profile Image
    denis_calin
    Answered on August 12, 2019 at 03:26 PM

     Hi @valeriaanissina!

    You can inject the following CSS code, which was provided by one of my colleagues, into the Image Radio Buttons widget to see how it affects the current design and make changes to it accordingly:


    .orange-radio:before {

        content: '' !important;

        left: 3px !important;

        background-color: yellow !important;

        position: absolute !important;

        display: inline-block !important;

        vertical-align: baseline !important;

        margin-right: 4px !important;

        -moz-box-sizing: border-box !important;

        -webkit-box-sizing: border-box !important;

        box-sizing: border-box !important;

        -webkit-border-radius: 50% !important;

        -moz-border-radius: 50% !important;

        border-radius: 50% !important;

        border: 2px solid red !important;

        width: 25px !important;

        height: 25px !important;

        cursor: pointer !important;

        visibility: visible !important;

        top: 5px !important;

        opacity: 0.6 !important;

    }

    li.checked .orange-radio:after {

        content: '' !important;

        position: absolute !important;

        z-index: 10 !important;

        display: inline-block !important;

        opacity: 0.6 !important;

        top: 10px !important;

        left: 8px !important;

        width: 15px !important;

        height: 15px !important;

        background-color: blue !important;

        -webkit-border-radius: 50% !important;

        -moz-border-radius: 50% !important;

        border-radius: 50% !important;

        cursor: pointer !important;

        visibility: visible !important;

    }

    .orange-radio {

        background:none !important;

    }

     

    width and height properties are responsible for the size of the radio buttons. background-color is responsible for the background color of the radio buttons. Please let us know if you have any questions.

  • Profile Image
    valeriaanissina
    Answered on August 12, 2019 at 04:06 PM

    Brilliant. Love your work!