Code by Day | Explore By Weekend

Last updated Dec 8, 2020 @ 11:23 pm

How To Highlight The Focus Input Field In The Divi Contact Form

The next snippet in our Divi Contact Form series is a micro-interaction for users as they enter information into the contact form fields. This can help keep the user alert and know which filed they are typing into. Take note that this snippet adds a border color on :focus mode. We did not have a border set in the design settings in this example, so we added a snippet with a transparent border first. You can remove that depending on your situation. Just copy and paste this CSS snippet into theDivi>Theme Options>Custom CSS box. 

/*add highlighted border around field in focus*/
/*this first snippet is not needed if you use a border in the desing settings*/
input[type=text], input.text, input.title, textarea, select {
    border: 1px solid rgba(44,186,108,0)!important;
input[type=text]:focus, input.text:focus, input.title:focus, textarea:focus, select:focus {
    border: 1px solid #2cba6c!important;
    color: #2cba6c;

Pin It on Pinterest


Your Cart