JS Animation. How to assign specific background for element on focus event

Hi! In this tutorial we’ll show how to assign specific background for element on focus event in JS Animated templates.

1. :focus is a CSS pseudo class that changes the style of element when it was clicked on by the mouse or tabbed. Let’s change the on focus background of textfield in contact form:

   

2. Inspect the needed element with developers tool like Firebug and add a rule for it:

   

3. Add a :focus to the element selector and add background:

   

4. Copy the rule to the bottom of your style.css file and save it:

   

5. Refresh the page and click on the text field to see the changes:

   

Now you know how to assign specific background for element on focus event. Feel free to check detailed video tutorial below.

Feel free to check the detailed video tutorial below: