{"id":14910,"date":"2021-01-06T23:49:08","date_gmt":"2021-01-07T07:49:08","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=14910"},"modified":"2023-12-01T04:07:52","modified_gmt":"2023-12-01T12:07:52","slug":"css-focus","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/css-focus\/","title":{"rendered":"CSS focus: A How-To Guide"},"content":{"rendered":"\n<p><em>The CSS :focus psuedo-class selects an element in its focus state. This happens when you click on an element or select it with the tab button. :focus comes after the name of the element you want to select.<\/em><\/p>\n\n\n\n<p>You may want to apply a style to an element only when it has focus on the web page. For instance, you may want to apply a border to a form field when a user clicks on the form field.<\/p>\n\n\n\n<p>That\u2019s where the CSS :focus pseudo-class comes in. The :focus pseudo-class applies a style when a user clicks on an element or selects the element using the <em>tab<\/em> keyboard button.<\/p>\n\n\n\n<p>This tutorial will discuss, with an example, the basics of the CSS :focus pseudo-class, and how to use it in your code. By the end of reading this tutorial, you\u2019ll be an expert at using the :focus pseudo-class to apply styles to elements in focus.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">CSS Pseudo-Classes<\/h2>\n\n\n\n<p>A pseudo-class is a keyword added to a <a href=\"https:\/\/careerkarma.com\/blog\/css-selectors\/\">CSS selector<\/a>. The pseudo-class specifies the state in which an element should appear in order for a style to apply. Pseudo-classes are added after a selector.<\/p>\n\n\n\n<p>Pseudo-classes let you set rules for elements in a special state, such as when you give an element focus. For this tutorial, we\u2019re going to focus on the :focus pseudo-class.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">CSS :focus Pseudo-Class<\/h2>\n\n\n\n<p>The CSS :focus pseudo-class applies styles to an element when the element has received focus on the web page. If a user clicks on an element or selects it with the <em>tab<\/em> key, it will become a focused element. <\/p>\n\n\n\n<p>The syntax for the :focus pseudo class is:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>textarea:focus {\n\tborder: 1px solid blue;\n}<\/pre><\/div>\n\n\n\n<p>This code sets a one pixel-wide solid blue border around any <a href=\"https:\/\/careerkarma.com\/blog\/html-textarea\/\">HTML &lt;textarea&gt;<\/a> elements on the web page. But, this rule is only applied when the &lt;textarea&gt; element is in focus.<\/p>\n\n\n\n<p>You can see our pseudo-class is applied after the element we want to select. It is necessary to specify a :focus psuedo-class for each element to which you want to class to apply in a list of selectors.<\/p>\n\n\n\n<p>Consider this syntax:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>input, textarea:focus {\n\tborder: 1px solid blue;\n}<\/pre><\/div>\n\n\n\n<p>The CSS rule in our code is applied to all &lt;input&gt; elements and all &lt;textarea&gt; tags when the user focuses on the text area. But, our rule is not applied to &lt;input&gt; tags in focus.<\/p>\n\n\n\n<p>One common scenario where the :focus selector is used is to style web forms. For instance, you may want the background color of a web form field to change when the user clicks on the form field. Or you may want to change the color of the border to change when the user clicks on the form field.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">:focus CSS Example<\/h2>\n\n\n\n<p>We have been asked to design a web form field for a website that collects a user\u2019s first name. When the form field enters the focus state, an orange border should be applied to the form field. In addition, the background color of the form field should change to light gray.\n\n<\/p>\n\n\n\n<p>We could use the following code to design this form field:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;html&gt;\n\n&lt;input class=&quot;textField&quot; placeholder=&quot;First Name&quot;&gt;\n\n&lt;style&gt;\n\n.textField:focus {\n\tbackground-color: lightgray;\n\tborder: 2px solid orange;\n}<\/pre><\/div>\n\n\n\n<p><em>Click the&nbsp;<\/em><img loading=\"lazy\" decoding=\"async\" width=\"24\" height=\"24\" class=\"wp-image-13930\" style=\"width: 24px;\" src=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584.png\" alt=\"Image of the &quot;Run Code&quot; Button, a triangle inside a circle\" srcset=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584.png 24w, https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584-20x20.png 20w\" sizes=\"auto, (max-width: 24px) 100vw, 24px\" \/> <em>button in the code editor above to see the output of our HTML\/CSS code.<\/em><\/p>\n\n\n\n<p>We have defined an <a href=\"https:\/\/careerkarma.com\/blog\/html-input\/\">HTML &lt;input&gt;<\/a> field with the class name <em>textField<\/em>. This input field shows the placeholder text <em>First Name<\/em>.<\/p>\n\n\n\n<p>When the user moves the form field into focus, the CSS properties in our <em>.textField:focus<\/em> rule are applied. These styles set a light gray background color and apply a 2px-wide solid orange <a href=\"https:\/\/careerkarma.com\/blog\/css-borders\/\">CSS border<\/a> around our form field.<\/p>\n\n\n\n<p>When the user moves the form field out of focus, these styles are no longer applied.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>The :focus pseudo-class applies a style when the user moves a web element into focus on the web page. :focus is commonly used to apply styles to fields in a form that are triggered when the user moves a form field into focus.<\/p>\n\n\n\n<p>:focus is one of many CSS pseudo-classes, such as :hover. To use a pseudo-class, specify the name of the pseudo-class after your CSS selector.<\/p>\n\n\n\n<p>Are you interested in learning more about CSS? Check out our <a href=\"https:\/\/careerkarma.com\/blog\/learn-css\/\">How to Learn CSS guide<\/a>. You&#8217;ll find actionable tips on how to learn CSS. In addition, our guide includes a list of top learning resources to help you master CSS.<\/p>\n","protected":false},"excerpt":{"rendered":"The CSS :focus psuedo-class selects an element in its focus state. This happens when you click on an element or select it with the tab button. :focus comes after the name of the element you want to select. You may want to apply a style to an element only when it has focus on the&hellip;","protected":false},"author":240,"featured_media":14911,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17287],"tags":[],"class_list":{"0":"post-14910","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-css"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"CSS","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":null,"is_sponser_post":"","is_guest_post":""},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v27.0) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Learn how to trigger a style when a user clicks on an element.<\/title>\n<meta name=\"description\" content=\"The CSS :focus pseudo-class allows developers to apply a style to an element with focus on the web page. On Career Karma, learn how to use the :focus pseudo-class.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/careerkarma.com\/blog\/css-focus\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS focus: A How-To Guide\" \/>\n<meta property=\"og:description\" content=\"The CSS :focus pseudo-class allows developers to apply a style to an element with focus on the web page. On Career Karma, learn how to use the :focus pseudo-class.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/css-focus\/\" \/>\n<meta property=\"og:site_name\" content=\"Career Karma\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/careerkarmaapp\" \/>\n<meta property=\"article:published_time\" content=\"2021-01-07T07:49:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-01T12:07:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/women-1209678_1920.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1020\" \/>\n\t<meta property=\"og:image:height\" content=\"680\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"James Gallagher\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@career_karma\" \/>\n<meta name=\"twitter:site\" content=\"@career_karma\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"James Gallagher\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-focus\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-focus\/\"},\"author\":{\"name\":\"James Gallagher\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94\"},\"headline\":\"CSS focus: A How-To Guide\",\"datePublished\":\"2021-01-07T07:49:08+00:00\",\"dateModified\":\"2023-12-01T12:07:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-focus\/\"},\"wordCount\":724,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-focus\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/women-1209678_1920.jpg\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/careerkarma.com\/blog\/css-focus\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-focus\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/css-focus\/\",\"name\":\"Learn how to trigger a style when a user clicks on an element.\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-focus\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-focus\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/women-1209678_1920.jpg\",\"datePublished\":\"2021-01-07T07:49:08+00:00\",\"dateModified\":\"2023-12-01T12:07:52+00:00\",\"author\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94\"},\"description\":\"The CSS :focus pseudo-class allows developers to apply a style to an element with focus on the web page. On Career Karma, learn how to use the :focus pseudo-class.\",\"breadcrumb\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-focus\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/careerkarma.com\/blog\/css-focus\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-focus\/#primaryimage\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/women-1209678_1920.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/women-1209678_1920.jpg\",\"width\":1020,\"height\":680},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-focus\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/careerkarma.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\",\"item\":\"https:\/\/careerkarma.com\/blog\/css\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"CSS focus: A How-To Guide\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\",\"url\":\"https:\/\/careerkarma.com\/blog\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/careerkarma.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94\",\"name\":\"James Gallagher\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg\",\"caption\":\"James Gallagher\"},\"description\":\"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.\",\"url\":\"https:\/\/careerkarma.com\/blog\/author\/jamesgallagher\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Learn how to trigger a style when a user clicks on an element.","description":"The CSS :focus pseudo-class allows developers to apply a style to an element with focus on the web page. On Career Karma, learn how to use the :focus pseudo-class.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/careerkarma.com\/blog\/css-focus\/","og_locale":"en_US","og_type":"article","og_title":"CSS focus: A How-To Guide","og_description":"The CSS :focus pseudo-class allows developers to apply a style to an element with focus on the web page. On Career Karma, learn how to use the :focus pseudo-class.","og_url":"https:\/\/careerkarma.com\/blog\/css-focus\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2021-01-07T07:49:08+00:00","article_modified_time":"2023-12-01T12:07:52+00:00","og_image":[{"width":1020,"height":680,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/women-1209678_1920.jpg","type":"image\/jpeg"}],"author":"James Gallagher","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"James Gallagher","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/css-focus\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/css-focus\/"},"author":{"name":"James Gallagher","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"headline":"CSS focus: A How-To Guide","datePublished":"2021-01-07T07:49:08+00:00","dateModified":"2023-12-01T12:07:52+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-focus\/"},"wordCount":724,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-focus\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/women-1209678_1920.jpg","articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/css-focus\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/css-focus\/","url":"https:\/\/careerkarma.com\/blog\/css-focus\/","name":"Learn how to trigger a style when a user clicks on an element.","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-focus\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-focus\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/women-1209678_1920.jpg","datePublished":"2021-01-07T07:49:08+00:00","dateModified":"2023-12-01T12:07:52+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"description":"The CSS :focus pseudo-class allows developers to apply a style to an element with focus on the web page. On Career Karma, learn how to use the :focus pseudo-class.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/css-focus\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/css-focus\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/css-focus\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/women-1209678_1920.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/women-1209678_1920.jpg","width":1020,"height":680},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/css-focus\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS","item":"https:\/\/careerkarma.com\/blog\/css\/"},{"@type":"ListItem","position":3,"name":"CSS focus: A How-To Guide"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/careerkarma.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94","name":"James Gallagher","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","caption":"James Gallagher"},"description":"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.","url":"https:\/\/careerkarma.com\/blog\/author\/jamesgallagher\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/14910","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/users\/240"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=14910"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/14910\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/14911"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=14910"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=14910"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=14910"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}