How to change the appearance of the Autocompleted Address Widget inputs?

  • dlsnelson
    Asked on April 8, 2018 at 1:45 PM

    1.  I would like the Autocompleted Address Widget to look the same as the Name, Email and Phone Number input boxes that I have in my form.  I do not know how to code for this.

    2.  There appears to be an "A" looming behind the Phone Number input box.  I do not know how to get rid of it.


    Jotform Thread 1438497 Screenshot
  • Adrian
    Replied on April 8, 2018 at 2:53 PM

    1. To make the widget inputs looks the same as the other form inputs, please add the following CSS to the Widget.

    input {
    border-width: 0px;
    border-color: #a1a1a1;
    color: #454545;
    padding: 4px 3px 2px 3px;
    box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.45), 0px 0px 0px 5px #f2f2f2, 0px 0px 0px 6px #e6e6e6 !important;
    -moz-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.45), 0px 0px 0px 5px #f2f2f2, 0px 0px 0px 6px #e6e6e6 !important;
    -webkit-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.45), 0px 0px 0px 5px #f2f2f2, 0px 0px 0px 6px #e6e6e6 !important;
    border-radius: .3em;
    margin-bottom: 5px;
    }

    How to Inject CSS Codes to Widgets

    2. The "A" is a part of the label "Area Code". To get rid of it, please Inject the following CSS to your form.

    #cid_19 .form-sub-label-container span,
    #cid_19 .form-sub-label-container label {
      display: none;
    }

    How to Inject Custom CSS Codes