How to Add CSS to the Form Field Focus

Overview

Would you like to add some CSS to your form field on focus? When any form field is clicked on, this is called (in CSS) a focus state. With some simple CSS, you can make the form fields jump off your page slightly. This tutorial will walk you through the CSS you need to extend the styling to your form fields as these fields are in focus.

All fields in WPForms, by default, will have a border around the field as the field comes into focus.

By default all form fields only have the border around the field

Setup

Once you’ve created your form, you can simply add the following CSS to your site.

The CSS below is targetting the form ID 25 and will have the form field focus jump off the page slightly as well as give the same effect to the submit button.

form#wpforms-form-25 input:focus, form#wpforms-form-25 textarea:focus {
    box-shadow: 5px 5px 10px #ccc;
}
form#wpforms-form-25 input, form#wpforms-form-25 textarea {
    transition: box-shadow 0.3s ease-in-out;
}

form#wpforms-form-25 button[type=submit]:hover {
    box-shadow: 5px 5px 10px #ccc;
    border: 1px solid #ccc;
    background-color: #eee;
}

form#wpforms-form-25 button[type=submit] {
    border: 1px solid transparent;
    transition: all 0.3s ease-in-out;
}

To use this CSS on your site, just remember to change the -form-25 in the CSS above to match your specific form id.

By adding a few lines of CSS you can make the form fields pop off the page when a user is completing the field

And that’s it! You’ve successfully added the CSS needed to change the form field focus. If you’d like to try out some other CSS tutorials on changing the look of your form fields, please have a look at our article on How to Add Material Design to Your Form Fields Using CSS.