Title: Remove input background and border
Last modified: January 21, 2024

---

# Remove input background and border

 *  Resolved [AprilBabyBelle](https://wordpress.org/support/users/aprilbabybelle/)
 * (@aprilbabybelle)
 * [2 years, 4 months ago](https://wordpress.org/support/topic/remove-input-background-and-border/)
 * Hi there,
   I am trying to style my contact form with just a bottom border for 
   my input field as the design below. I have managed to get the bottom border the
   correct colour but I can’t seem to get rid of the white input fields.Could someone
   assist with the correct CSS?Many thanks!
 * [https://drive.google.com/file/d/14M8sUwMvWMWJfnsWpRLTa0ra06lrJ6tQ/view?usp=sharing](https://drive.google.com/file/d/14M8sUwMvWMWJfnsWpRLTa0ra06lrJ6tQ/view?usp=sharing)
    -  This topic was modified 2 years, 4 months ago by [AprilBabyBelle](https://wordpress.org/support/users/aprilbabybelle/).
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fremove-input-background-and-border%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 5 replies - 1 through 5 (of 5 total)

 *  Thread Starter [AprilBabyBelle](https://wordpress.org/support/users/aprilbabybelle/)
 * (@aprilbabybelle)
 * [2 years, 4 months ago](https://wordpress.org/support/topic/remove-input-background-and-border/#post-17360857)
 * I’ve also noticed that the CSS for the confirmation message is not reflecting
   on the front end.
 *  [fab17an](https://wordpress.org/support/users/fab17an/)
 * (@fab17an)
 * [2 years, 4 months ago](https://wordpress.org/support/topic/remove-input-background-and-border/#post-17366096)
 * Hi there,
 *  I also had that question and I did it with this code, I hope it helps you
 *     ```wp-block-code
       /* 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](https://wordpress.org/support/users/rsouzaam/)
 * (@rsouzaam)
 * [2 years, 4 months ago](https://wordpress.org/support/topic/remove-input-background-and-border/#post-17367019)
 * Hi [@aprilbabybelle](https://wordpress.org/support/users/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](https://wpforms.com/developers/how-to-add-material-design-to-your-form-fields-using-css/).
 * And to adjust the visual of the confirmation message, you can check our [guide here](https://wpforms.com/docs/how-to-customize-the-style-of-individual-form-fields/#confirmation-message).
 * And in case it helps, here’s a tutorial on [how to add custom CSS like this to your site](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/).
 * Hope this helps!
 *  Thread Starter [AprilBabyBelle](https://wordpress.org/support/users/aprilbabybelle/)
 * (@aprilbabybelle)
 * [2 years, 4 months ago](https://wordpress.org/support/topic/remove-input-background-and-border/#post-17371099)
 * Thank you to you both! Solutions work perfectly. Much appreciated!
 *  Plugin Support [Ralden Souza](https://wordpress.org/support/users/rsouzaam/)
 * (@rsouzaam)
 * [2 years, 4 months ago](https://wordpress.org/support/topic/remove-input-background-and-border/#post-17376324)
 * Hi [@aprilbabybelle](https://wordpress.org/support/users/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.

 * ![](https://ps.w.org/wpforms-lite/assets/icon.svg?rev=3254748)
 * [WPForms - Easy Form Builder for WordPress - Contact Forms, Payment Forms, Surveys, & More](https://wordpress.org/plugins/wpforms-lite/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/wpforms-lite/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/wpforms-lite/)
 * [Active Topics](https://wordpress.org/support/plugin/wpforms-lite/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/wpforms-lite/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/wpforms-lite/reviews/)

 * 5 replies
 * 3 participants
 * Last reply from: [Ralden Souza](https://wordpress.org/support/users/rsouzaam/)
 * Last activity: [2 years, 4 months ago](https://wordpress.org/support/topic/remove-input-background-and-border/#post-17376324)
 * Status: resolved