Is there any way to change the style of widgets or prefix fields?

  • Profile Image
    ExA-SUMMIT
    Asked on April 07, 2017 at 11:54 AM

    The prefix option before the name field doesn't seem to have options to change the style to match the rest of the form. Is this possible?

     

    Furthermore, the contact number widget also has the same issue.

     

    How can I edit the style of these fields?

  • Profile Image
    Kiran
    Answered on April 07, 2017 at 01:54 PM

    Please add the following CSS code to the form so the prefix of name field will be displaying as other fields on the form.

    #prefix_24 {

        background : #fafafa none repeat scroll 0 0;

        border : 1px solid #ccc;

        border-radius : 2px;

        box-sizing : border-box;

        font-family : sans-serif;

        font-size : 12px;

        line-height : normal;

        margin : 6px 0 4px;

        padding : 11px;

        width : 100%;

    }

    Now, add the following CSS code to the Custom CSS section of the widget.

    #telephone_input  {

        background : #fafafa none repeat scroll 0 0;

        border : 1px solid #ccc;

        border-radius : 2px;

        box-sizing : border-box;

        font-family : sans-serif;

        line-height : normal;

        margin : 6px 0 4px;

        padding : 20px 40px;

        width : 100%;

    }

    .flag-dropdown.f16 {

        margin-top: 12px;

    }

     

    Fields should be now displayed to match the other fields on the form. Please get back to us if you need any further assistance. We will be happy to help.