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

  • Profile Image
    dlsnelson
    Asked on April 08, 2018 at 01: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.


  • Profile Image
    Adrian
    Answered on April 08, 2018 at 02: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