How to Add CSS to the Form Field Focus

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.

Creating your form.

First, you’ll need to create a new form and add your fields. If you need any help in creating a form, please review this documentation.

Once your form setup is complete, its now time to add the CSS to your site.

Adding CSS for form field on focus

If you’re not sure how or where to add CSS to your site, please review this tutorial.

The CSS below is targeting 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.

If you need assistance in how to find your form ID, please check out this tutorial.

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.

FAQ

Q: How can I add autofocus to my form?

A: If you want to have autofocus on the first form field for your WPForms, please review this tutorial.