{"id":56602,"date":"2015-10-29T04:19:01","date_gmt":"2015-10-29T08:19:01","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=56602"},"modified":"2015-12-08T04:18:03","modified_gmt":"2015-12-08T09:18:03","slug":"js-animation-how-to-assign-specific-background-for-element-on-focus-event","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/js-animation-how-to-assign-specific-background-for-element-on-focus-event.html","title":{"rendered":"JS Animation. How to assign specific background for element on focus event"},"content":{"rendered":"<p>Hi! In this tutorial we&#8217;ll show how to assign specific background for element on focus event in JS Animated templates.<\/p>\r\n<a href=\"http:\/\/www.youtube.com\/watch?v=HzZTut-Cc1A?width=1280&amp;height=720\" rel=\"prettyPhoto\">JS Animation. How to assign specific background for element on focus event<\/a>\r\n<ol>\r\n\t\t<li><p> :focus is a CSS pseudo class that changes the style of element when it was clicked on by the mouse or tabbed. Let&#8217;s change the on focus background of textfield in contact form:<\/p>\r\n\r\n<a href=\"\/help\/wp-content\/uploads\/2015\/10\/How-to-assign-specific-background-for-element-on-focus-event1.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2015\/10\/How-to-assign-specific-background-for-element-on-focus-event1-300x194.jpg\" alt=\"How to assign specific background for element on focus event1\" width=\"300\" height=\"194\" class=\"aligncenter size-medium wp-image-56603\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/10\/How-to-assign-specific-background-for-element-on-focus-event1-300x194.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/10\/How-to-assign-specific-background-for-element-on-focus-event1-150x97.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/10\/How-to-assign-specific-background-for-element-on-focus-event1-1024x663.jpg 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/10\/How-to-assign-specific-background-for-element-on-focus-event1.jpg 1263w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n<\/li>\r\n\t\t<li><p>Inspect the needed element with <a href=\"\/help\/developer-tools.html\" target=\"_blank\"><strong>developers tool<\/strong> <\/a>like <strong>Firebug<\/strong> and add a rule for it:<\/p>\r\n\r\n<a href=\"\/help\/wp-content\/uploads\/2015\/10\/How-to-assign-specific-background-for-element-on-focus-event2.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2015\/10\/How-to-assign-specific-background-for-element-on-focus-event2-300x194.jpg\" alt=\"How to assign specific background for element on focus event2\" width=\"300\" height=\"194\" class=\"aligncenter size-medium wp-image-56604\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/10\/How-to-assign-specific-background-for-element-on-focus-event2-300x194.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/10\/How-to-assign-specific-background-for-element-on-focus-event2-150x97.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/10\/How-to-assign-specific-background-for-element-on-focus-event2-1024x663.jpg 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/10\/How-to-assign-specific-background-for-element-on-focus-event2.jpg 1263w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n<\/li>\r\n\t\t<li><p>Add a :focus to the element selector and add background: <\/p>\r\n\r\n<a href=\"\/help\/wp-content\/uploads\/2015\/10\/How-to-assign-specific-background-for-element-on-focus-event3.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2015\/10\/How-to-assign-specific-background-for-element-on-focus-event3-300x194.jpg\" alt=\"How to assign specific background for element on focus event3\" width=\"300\" height=\"194\" class=\"aligncenter size-medium wp-image-56605\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/10\/How-to-assign-specific-background-for-element-on-focus-event3-300x194.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/10\/How-to-assign-specific-background-for-element-on-focus-event3-150x97.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/10\/How-to-assign-specific-background-for-element-on-focus-event3-1024x663.jpg 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/10\/How-to-assign-specific-background-for-element-on-focus-event3.jpg 1263w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n<\/li>\r\n\t\t<li><p>Copy the rule to the bottom of your style.css file and save it:<\/p>\r\n\r\n<a href=\"\/help\/wp-content\/uploads\/2015\/10\/How-to-assign-specific-background-for-element-on-focus-event4.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2015\/10\/How-to-assign-specific-background-for-element-on-focus-event4-300x194.jpg\" alt=\"How to assign specific background for element on focus event4\" width=\"300\" height=\"194\" class=\"aligncenter size-medium wp-image-56606\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/10\/How-to-assign-specific-background-for-element-on-focus-event4-300x194.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/10\/How-to-assign-specific-background-for-element-on-focus-event4-150x97.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/10\/How-to-assign-specific-background-for-element-on-focus-event4-1024x663.jpg 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/10\/How-to-assign-specific-background-for-element-on-focus-event4.jpg 1263w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n<\/li>\r\n\t\t<li><p>Refresh the page and click on the text field to see the changes:<\/p>\r\n\r\n<a href=\"\/help\/wp-content\/uploads\/2015\/10\/How-to-assign-specific-background-for-element-on-focus-event5.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2015\/10\/How-to-assign-specific-background-for-element-on-focus-event5-300x194.jpg\" alt=\"How to assign specific background for element on focus event5\" width=\"300\" height=\"194\" class=\"aligncenter size-medium wp-image-56607\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/10\/How-to-assign-specific-background-for-element-on-focus-event5-300x194.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/10\/How-to-assign-specific-background-for-element-on-focus-event5-150x97.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/10\/How-to-assign-specific-background-for-element-on-focus-event5-1024x663.jpg 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/10\/How-to-assign-specific-background-for-element-on-focus-event5.jpg 1263w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n<\/li>\r\n<\/ol>\t\r\n<p>Now you know how to assign specific background for element on focus event. Feel free to check detailed video tutorial below.<\/p>\r\n\r\n<p>Feel free to check the detailed video tutorial below:<\/p>\r\n\r\n<a href=\"http:\/\/www.youtube.com\/watch?v=HzZTut-Cc1A?width=1280&amp;height=720\" rel=\"prettyPhoto\">JS Animation. How to assign specific background for element on focus event<\/a>","protected":false},"excerpt":{"rendered":"<p>In this tutorial we&#8217;ll show how to assign specific background for element on focus event in JS Animated templates.<\/p>\n","protected":false},"author":81,"featured_media":56608,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1016],"tags":[1008,2108,2107,1372],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/56602"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/81"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=56602"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/56602\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/56608"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=56602"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=56602"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=56602"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}