How to change styles of Driving Distance widget to match style of the form

  • Profile Image
    infoexpressnow
    Asked on February 12, 2016 at 08:16 AM

    Additionally i have implemented a driving distance widget which i would like to ammend with some css yet everything i am trying is not succeeding. Am I doing somnething wrong?

    I would like the lines to a) look like the rest fo the form and b) to have some space in between.

  • Profile Image
    Boris
    Answered on February 12, 2016 at 08:29 AM

    I believe that this is about your form named test, with form ID 60401273461344.

    In order to change styles of Driving Distance widget on that form, please (1) click on the wand-shaped icon of this widget, (2) switch to the Custom CSS tab, and (3) paste the following CSS codes into the widget:

    input[type="text"] {
    border-radius: 6px;
    width: 100%;
    max-width: 350px;
    box-sizing: border-box;
    background-color: #F3ECEC;
    transition: all 0.5s ease-in-out 0s;
    box-shadow: none;
    outline: medium none;
    padding: 6px 8px;
    border: 1px solid #FFF !important;
    font-size: 1em;
    line-height: 1.071em;
    font-family: "Exo 2",sans-serif;
    }
    input[type="text"]:focus {
    border: 1px solid #2D60AF !important;
    }

    Please refer to the following image for visual guidance on how to add these styles to your widget:

    This will result in your Driving Distance widget looking as in the following image:

    If you need further assistance with this, please let us know here in this support thread, and we will be happy to help.

  • Profile Image
    infoexpressnow
    Answered on February 12, 2016 at 08:49 AM

    thank you

     

    you guys rock