{"id":14188,"date":"2011-09-06T20:02:46","date_gmt":"2011-09-07T03:02:46","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=14188"},"modified":"2021-02-15T07:33:46","modified_gmt":"2021-02-15T15:33:46","slug":"focus","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/selectors\/f\/focus\/","title":{"rendered":":focus"},"content":{"rendered":"\n<p>The <code>:focus<\/code> pseudo class in CSS is used for styling an element that is currently targeted by the keyboard, or activated by the mouse. Here is an example:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">textarea:focus {\n  background: pink;\n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_yLVMXOE\" src=\"\/\/codepen.io\/anon\/embed\/yLVMXOE?height=450&amp;theme-id=1&amp;slug-hash=yLVMXOE&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed yLVMXOE\" title=\"CodePen Embed yLVMXOE\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Any element (most commonly\u00a0<code>&lt;input><\/code>s and\u00a0<code>&lt;textarea><\/code>s) are in &#8220;focus&#8221; when they are selected and ready to enter text (like when a cursor is blinking). Mouse users can click them (or their related <code>label<\/code>) to focus, and keyboard users can TAB into them.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-tabbing\">&#8220;Tabbing&#8221;<\/h3>\n\n\n<p>nother use of the&nbsp;<code>:focus<\/code>&nbsp;pseudo class is &#8220;tabbing&#8221; through elements. Many browsers have a default focus state for tab selection, which is a dotted outline. It is&nbsp;<a href=\"https:\/\/web.archive.org\/web\/20160414145512\/http:\/\/css-tricks.com\/removing-the-dotted-outline\/\">quite easy to remove<\/a>, but make sure to&nbsp;<a href=\"https:\/\/web.archive.org\/web\/20160414145512\/http:\/\/a11yproject.com\/posts\/never-remove-css-outlines\/\" rel=\"noopener\">replace it with a suitable alternative<\/a>&nbsp;if you do.<\/p>\n\n\n\n<p><code>&lt;a><\/code>s,\u00a0<code>&lt;button>s<\/code>,\u00a0<code>&lt;input>s<\/code>, and\u00a0<code>textareas<\/code>\u00a0all have the\u00a0<code>:focus<\/code>\u00a0state by default, but you can give a focus state to any element in\u00a0HTML. Both the\u00a0<code>contenteditable<\/code>\u00a0and\u00a0<code>tabindex<\/code>\u00a0attributes work for this, as in this example:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_yLVMXaq\" src=\"\/\/codepen.io\/anon\/embed\/yLVMXaq?height=450&amp;theme-id=1&amp;slug-hash=yLVMXaq&amp;default-tab=html,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed yLVMXaq\" title=\"CodePen Embed yLVMXaq\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"article-header-id-1\">Other Resources<\/h3>\n\n\n<ul><li><a href=\"https:\/\/web.archive.org\/web\/20160414145512\/http:\/\/www.w3.org\/TR\/CSS2\/selector.html#dynamic-pseudo-classes\" rel=\"noopener\">CSS2 Spec<\/a><\/li><li><a href=\"https:\/\/web.archive.org\/web\/20160414145512\/http:\/\/dev.w3.org\/csswg\/selectors3\/#the-user-action-pseudo-classes-hover-act\" rel=\"noopener\">Selectors level 3<\/a><\/li><li><a href=\"https:\/\/web.archive.org\/web\/20160414145512\/http:\/\/dev.w3.org\/csswg\/selectors4\/#focus-pseudo\" rel=\"noopener\">Selectors level 4<\/a><\/li><li><a href=\"https:\/\/web.archive.org\/web\/20160414145512\/https:\/\/developer.mozilla.org\/en-US\/docs\/CSS\/:focus\" rel=\"noopener\">MDN<\/a><\/li><li><a href=\"https:\/\/web.archive.org\/web\/20160414145512\/http:\/\/css-tricks.com\/removing-the-dotted-outline\/\">Removing the Dotted Outline on CSS-Tricks<\/a><\/li><li><a href=\"https:\/\/web.archive.org\/web\/20160414145512\/http:\/\/html5doctor.com\/the-contenteditable-attribute\/\" rel=\"noopener\">More about\u00a0<code>contenteditable<\/code><\/a><\/li><li><a href=\"https:\/\/web.archive.org\/web\/20160414145512\/http:\/\/snook.ca\/archives\/accessibility_and_usability\/elements_focusable_with_tabindex\" rel=\"noopener\">More about\u00a0<code>tabindex<\/code><\/a><\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-related\">Related<\/h3>\n\n\n    \t\t\n    <div class=\"in-article-cards\">\n      <article class=\"in-article-card link\" id=\"mini-post-14188\">\n\n  <time datetime=\"2017-05-12\" title=\"Originally published Sep 6, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    May 12, 2017  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/focus-within-pseudo-class\/\">\n      The `:focus-within` Pseudo Class    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-14188\">\n\n  <time datetime=\"2017-07-29\" title=\"Originally published Sep 6, 2011\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    Sep 15, 2021  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/almanac\/selectors\/f\/focus-within\/\">\n      :focus-within    <\/a>\n  <\/h3>\n\n      <a href=\"https:\/\/css-tricks.com\/almanac\/selectors\/f\/focus-within\/\" class=\"almanac-example\">\n      <code class=\"language-css\">form:focus-within { background: lightyellow; }<\/code>\n    <\/a>\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card link\" id=\"mini-post-14188\">\n\n  <time datetime=\"2018-04-08\" title=\"Originally published Sep 6, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Apr 8, 2018  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/focus-visible-and-backwards-compatibility\/\">\n      `:focus-visible` and backwards compatibility    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n    <\/div>\n  \n\n\n<h3 class=\"wp-block-heading\" id=\"browser-support\">Browser Support<\/h3>\n\n\n<p>All browsers support basic usage of <code>:focus<\/code>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The :focus pseudo class in CSS is used for styling an element that is currently targeted by the keyboard, or activated by the mouse. Here is an example: Any element (most commonly\u00a0&lt;input>s and\u00a0&lt;textarea>s) are in &#8220;focus&#8221; when they are selected and ready to enter text (like when a cursor is blinking). Mouse users can click [&hellip;]<\/p>\n","protected":false},"author":1036,"featured_media":0,"parent":14182,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-almanac-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":281230,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/f\/focus-visible\/","url_meta":{"origin":14188,"position":0},"title":":focus-visible","date":"January 11, 2019","format":false,"excerpt":"The :focus-visible pseudo-class (also known as the \"Focus-Indicated\" pseudo-class) is a native CSS way to style elements that: Are in focusNeed a visible indicator to show focus (more on this later) :focus-visible is used similarly to :focus: to bring attention to the element that currently has the focus. .element:focus-visible {\u2026","rel":"","context":"In \":focus-visible\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/01\/focus-visible.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":256635,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/f\/focus-within\/","url_meta":{"origin":14188,"position":1},"title":":focus-within","date":"July 29, 2017","format":false,"excerpt":"The :focus-within pseudo-selector in CSS is a bit unusual, although well-named and rather intuitive. It selects an element if that element contains any children that have :focus. form:focus-within { background: lightyellow; } Which works like this... <!-- this form will be selected --> <form action=\"#\"> <!-- when this input is\u2026","rel":"","context":"In \":focus-within\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":335874,"url":"https:\/\/css-tricks.com\/snippets\/css\/form-validation-styling-on-input-focus\/","url_meta":{"origin":14188,"position":2},"title":"Form Validation Styling on Input Focus","date":"March 8, 2021","format":false,"excerpt":"\/* Only show invalid ring while not focused *\/ input:not(:focus):not(:placeholder-shown):invalid { border-color: var(--color-invalid); } input:not(:focus):not(:placeholder-shown):invalid ~ .error-message { display: block; } \/* Only show valid ring while not focused and if a value is entered *\/ \/* :empty won't work here as that targets elements that have no childeren. Therefore\u2026","rel":"","context":"In \":invalid\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3272,"url":"https:\/\/css-tricks.com\/snippets\/jquery\/clear-default-search-string-on-focus\/","url_meta":{"origin":14188,"position":3},"title":"Clear Default Search String on Focus","date":"August 7, 2009","format":false,"excerpt":"$(\"#s\") .val(\"Search...\") .css(\"color\", \"#ccc\") .focus(function(){ $(this).css(\"color\", \"black\"); if ($(this).val() == \"Search...\") { $(this).val(\"\"); } }) .blur(function(){ $(this).css(\"color\", \"#ccc\"); if ($(this).val() == \"\") { $(this).val(\"Search...\"); } }); Set value of field to \"Search...\" When field comes into focus, set color to black. If value is default, remove it. When field goes\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":7873,"url":"https:\/\/css-tricks.com\/snippets\/jquery\/highlight-related-label-when-input-in-focus\/","url_meta":{"origin":14188,"position":4},"title":"Highlight Related Label when Input in Focus","date":"November 18, 2010","format":false,"excerpt":"$(\"form :input\").focus(function() { $(\"label[for='\" + this.id + \"']\").addClass(\"labelfocus\"); }).blur(function() { $(\"label\").removeClass(\"labelfocus\"); });","rel":"","context":"With 6 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3812,"url":"https:\/\/css-tricks.com\/snippets\/javascript\/clear-field-on-focus\/","url_meta":{"origin":14188,"position":5},"title":"Clear Field on Focus","date":"September 4, 2009","format":false,"excerpt":"Replace \"value\" with the default value. If the field is selected, the default value will go away. If the user has previously changed the field value, it'll be left alone. Alternatively, use onfocus=\"this.value='';\" to always clear the field.","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14188"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/1036"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=14188"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14188\/revisions"}],"predecessor-version":[{"id":334588,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14188\/revisions\/334588"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14182"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=14188"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=14188"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}