Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter AprilBabyBelle

    (@aprilbabybelle)

    I’ve also noticed that the CSS for the confirmation message is not reflecting on the front end.

    Hi there,

    I also had that question and I did it with this code, I hope it helps you

    /* Customizing WPForms */
    #wpforms-129-field_2::placeholder, #wpforms-129-field_3::placeholder, #wpforms-129-field_4::placeholder, #wpforms-129-field_5::placeholder,
    #wpforms-129-field_6, #wpforms-129-field_7::placeholder {
    color: rgba(0, 0, 0, 0.7);
     font-size: 16px;
     font-weight: 400;
     opacity: 1;
    }
    div.wpforms-container-full input[type=date]:focus, div.wpforms-container-full input[type=datetime]:focus, div.wpforms-container-full input[type=datetime-local]:focus, div.wpforms-container-full input[type=email]:focus, div.wpforms-container-full input[type=month]:focus, div.wpforms-container-full input[type=number]:focus, div.wpforms-container-full input[type=password]:focus, div.wpforms-container-full input[type=range]:focus, div.wpforms-container-full input[type=search]:focus, div.wpforms-container-full input[type=tel]:focus, div.wpforms-container-full input[type=text]:focus, div.wpforms-container-full input[type=time]:focus, div.wpforms-container-full input[type=url]:focus, div.wpforms-container-full input[type=week]:focus, div.wpforms-container-full select:focus, div.wpforms-container-full textarea:focus {
     box-shadow: none !important;
    }
    div.wpforms-container-full input[type=submit]:focus:after, div.wpforms-container-full button[type=submit]:focus:after, div.wpforms-container-full .wpforms-page-button:focus:after {
     border: none !important;
    }
    .wpforms-field-required ~ em, input.wpforms-error ~ em {
     display: none !important;
    }
    .wpforms-field-required ~ em, input.wpforms-error ~ em {
     display: none !important;
    }
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    select,
    textarea {
     background: none !important;
     border-top: 0px !important;
     border-left: 0px !important;
     border-right: 0px !important;
    }
    Plugin Support Ralden Souza

    (@rsouzaam)

    Hi @aprilbabybelle,

    Thanks for reaching out!

    From your screenshot, it seems you’d like to add Material Design to your WPForms fields. For this, you can follow our guide on how to add Material Design using CSS.

    And to adjust the visual of the confirmation message, you can check our guide here.

    And in case it helps, here’s a tutorial on how to add custom CSS like this to your site.

    Hope this helps!

    Thread Starter AprilBabyBelle

    (@aprilbabybelle)

    Thank you to you both! Solutions work perfectly. Much appreciated!

    Plugin Support Ralden Souza

    (@rsouzaam)

    Hi @aprilbabybelle,

    You’re most welcome, happy to help!

    It looks like you’ve marked this post as resolved. If you’d like more help with using WPForms Lite, please feel free to reach out.

    Thanks!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Remove input background and border’ is closed to new replies.